SVG's with subicon won't change color via CSS

Question

My treeview menu currently looks like this: https://i.imgur.com/AG7hmRh.png

You can see that icons with a subicon do not change color. I’ve double-checked that they are indeed SVG files: https://i.imgur.com/kzGTxQb.png

Even when I target them very specifically using CSS, they won’t change color: https://i.imgur.com/6bpL4YC.png

Is there anybody who knows why this is happening and/or how to fix this? Thanks!

(For some reason I was unable to upload images/files, that’s why there are imgur links)

icon

Best answer by Tim de Lang 29 August 2023, 16:08

View original

Tim de Lang · Accepted Answer

Hi Marius,without the code (svg images are just code, you can open them with notepad to see) it's hard to tell. Most likely there is a hardcoded color when there is an embedded image somewhere in the code. Possibly in a mask or overlay or something similar.(If you made the color blue, but there's a black overlay, it still looks black. Your CSS for blue fill is definitely being applied and is not overwritten, so it must be something else.)You can open an SVG and check for hex colors.if you remove those it might fix the coloring.I suspect the program you're using to generate the svg is adding some extraneous markup that is to blame.Kind regards,Tim de Lang

Marius Korff · Answer

Thanks! Removing 2#000000 fills fixed this😄 Seems Icons8 puts these in when downloading a svg with a subicon.

Sign up

Login to the Thinkwise Software Community

Scanning file for viruses.

This file cannot be downloaded