Feature Request: Feature Request: Support Custom Properties (CSS Variables) for multicolor icons in spritemap

Author: cojacoCreated Jun 24, 2026Updated Jun 24, 2026

Description:

Is your feature request related to a problem? Please describe. Currently, the multicolor icons in the SVGs are hardcoded with fixed hex color values (e.g., fill="#333" and fill="#fff"). Because these icons are loaded via an SVG spritemap (<use xlink:href="...">), it is not possible to override or style individual paths/groups from an external stylesheet. This limits the ability to customize the player's theme or adapt the icons to custom dark/light modes.

Describe the solution you'd like It would be amazing if the internal colors of the icons could use CSS Custom Properties (CSS variables) with fallback values. This way, the player retains its default look out of the box, but developers can easily recolor specific parts of the icons via CSS.

For example, instead of a hardcoded #333, we could use: fill="var(--mejs-icon-primary, #333)"

Example of the current limitation: Here is a snippet of the current behavior where the colors are locked in:

HTML

<svg xmlns="http://www.w3.org/2000/svg" id="mep_0-icon-overlay-play" class="mejs__icon-overlay-play" aria-hidden="true" focusable="false">
   <use xlink:href="/images/mejs-controls.svg#icon-overlay-play">
      <symbol xmlns="http://www.w3.org/2000/svg" id="icon-overlay-play" viewBox="0 0 80 80">
         <g fill="#333" stroke="#fff" stroke-width="5px">
            <path d="M2.5,40A37.5,37.5,0,1,1,40,77.5,37.51,37.51,0,0,1,2.5,40Z"></path>
         </g>
         <g fill="#fff">
            <path d="M60.3,38a1,1,0,0,1,.6,1.4.9.9,0,0,1-.6.6L30,57.5c-1,.6-1.7.1-1.7-1v-35c0-1.1.8-1.5,1.7-1Z"></path>
         </g>
      </symbol>
   </use>
</svg>

Proposed change in the spritemap source:

HTML

<g fill="var(--mejs-icon-bg, #333)" stroke="var(--mejs-icon-stroke, #fff)" stroke-width="5px">
   <path d="M2.5,40A37.5,37.5,0,1,1,40,77.5,37.51,37.51,0,0,1,2.5,40Z"></path>
</g>
<g fill="var(--mejs-icon-primary, #fff)">
   <path d="M60.3,38a1,1,0,0,1,.6,1.4.9.9,0,0,1-.6.6L30,57.5c-1,.6-1.7.1-1.7-1v-35c0-1.1.8-1.5,1.7-1Z"></path>
</g>

Additional context Using CSS Custom Properties inside SVGs works perfectly even when referenced via <use>, as long as the variables are defined in the document scope (e.g., on :root or a parent container like .mejs__container). This would drastically improve the customizability of the MediaElement player UI.

Source: mediaelement/mediaelement