Use custom icons with curentColor

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" ...

Screenshot from 2021-07-30 16-20-34

But this doesn’t, it just defaults to black:
&::before {content: svg-uri('<svg fill="currentColor" ...

Screenshot from 2021-07-30 16-21-09

Did anyone do that before? I’m not sure what I’m missing…

1 Like

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.

1 Like

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.


This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.