The discussion revolves around using custom icons with currentColor in a theme without default icons. nolo attempted to use currentColor for the fill in an SVG, but it defaulted to black. awesomerobot explained that currentColor doesn’t work with inlined CSS SVGs and suggested using CSS filters as a workaround. However, this approach has shortcomings. The recommended solution is to include icons in the markup to support different color schemes, as using CSS alone is not feasible.
I want to show some custom icons in a theme where there are no icons by default. It generally works fine, but I’m not able to use currentColor for the fill.
So this works:
&::before {content: svg-uri('<svg fill="red" ...
But this doesn’t, it just defaults to black:
&::before {content: svg-uri('<svg fill="currentColor" ...
Did anyone do that before? I’m not sure what I’m missing..
As far as I know currentColor won’t work with SVGs inlined with CSS, unfortunately the colors need to be hardcoded in the SVG. One workaround I’ve used before to change the colors are CSS filters, but those have shortcomings as well.
Ah ok. Thanks @awesomerobot! That sounds like the only approach that would also support different color schemes is having the icons in the markup?
Yes, unfortunately! I wish there were a better way with CSS, as it can be the easier way to add a decorative icon in some places.