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.
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
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 :
with
This way the currentColor variable will take the text color.