SVG color through CSS

How To
1

Hello,

I am using custom CSS to colour the svg that is in a div:

%root% .card__icon {
color: var(–secondary-light);
}

When I use an icon available from the dropdown (such as Themify), this works as expected:
image

Now, when I use a specific svg, the icon remains black:
image

I do not believe this to be a problem with the .svg file, since I can color the icon using the colour selector in the interface:
image

Any idea what I am doing wrong ?
Thanks,
Philippe

2

Hi,
It depends on which element you’re using (the icon or SVG element) and the SVG itself.
A live link would be helpful.

Try the following instead:

%root% .card__icon {
  fill: var(–secondary-light);
}
3

Hello,

Thanks for your answer. Using ‘fill’ solved the problem. Now I am still puzzled why there a difference in treatment between an icon that is retrieved from the list and an icon that is downloaded as svg. Are they not treated the same?

Thanks and best regards,
Philippe

4

It depends on svg stroke and path attributes directly into certain a given file.
You can read about overwriting color and fill.
For example, if a path element specifies its fill color as an inline attribute, it cannot be overridden by CSS unless targeted directly.
If you wnt use Brick options, svg file have to be properly prepared.