fill: currentColor in styles head tag prevents styling width css

[Safe-Mode]

I use multicolor pattern to keep fill attribute which set to currentColor. In css I change both, color and fill property to change dynamically 2 colors but there is css rule inserted in head by plugin

[_nghost-tnf-c1] svg[_ngcontent-tnf-c1], [_nghost-tnf-c1] use[_ngcontent-tnf-c1] {
fill: currentColor;
}

and it prevents my styles working, is there any setting to cancel this behavior?

[jannicz]

As i understand you correct, your SVGs contain styles (fill and stroke attributes). If so, you will not be able to override them with CSS. In order to override them, you need to strip them.

currentColor means that the color of the parent node is applied. If you set the color of the div where you invoke sag-icon-sprite to color: inherit or color: unset the current color will take over these values, see https://developer.mozilla.org/en-US/docs/Web/CSS/unset

If I don't hear otherwise, I will close this issue Monday evening. Thank you for using!

[Safe-Mode]

I've got fill attributes set to currentColor on certain parts inside svg, other parts stay without fill attribute. I've made so to change both - color and fill css rules to control over two colors outside svg. My css rules are inserted before line I've meintioned in the first message and I can't change color.

[Safe-Mode]

Right, I've just added styles for use tag. Not so conveniently but still can live with it). I think it's probably needed add setting like [inheritStyles]="true/false" or something

[jannicz]

I will think about your proposal and mark this issue as enhancement in the meantime.

I am happy that you found a solution though ;-)