Not possible to use currentColor for svg icons

[ctwhome]

The current implementation uses the tag setting the icon as a background-image from the css. In this manner, it is impossible to use the currentColor variable that comes with the SVG. (https://stackoverflow.com/questions/13367868/how-to-modify-the-fill-color-of-an-svg-image-when-being-served-as-background-ima)

A possible solution is to apply a mask to each icon from the global theme, but it doesn't work well with all icons

background-color:<theme>;
    -webkit-mask-image: url(icon.svg);
    mask-image: url(icon.svg);

The best approach would be to insert the svg inside of each toolbar component instead of using the tag

For the previous example, the you would replace :

<DropDownItem on:click class="item">
  <i class="icon image" />
  <span class="text">Image</span>
</DropDownItem>

with

<DropDownItem on:click class="item">
  <svg src="images/icons/image.svg">
  <span class="text">Image</span>
</DropDownItem>

This way the currentColor variable will take the text color.

[umaranis]

Hi @ctwhome ,

If I understand it correctly, the suggested solution will make the SVG part of the component itself.

The downside is the user will lose the ability to change the SVG using CSS. What do you think about this downside?

[ctwhome]

Why not let the user choose their own svg with a placeholder with ? I am thinking of how important is to be able to theme. Any application with a dark theme will be broken this way.