How to override "currentcolor"?

[d-mackenzie]

Hi,

I have an SVG icon like so:

<svg width="1em" height="1em" fill="currentcolor" xmlns="http://www.w3.org/2000/svg">
	<path d="..."></path>
</svg>

And some axaml like so:

<Svg Path="/Assets/ci-00882.svg"
	Width="20"
	Height="20"/>

This renders great - in black. I'd like to override or set the "currentcolor" so I can render it, for example, in white for a dark theme. Is it possible to do this?

I've tried a couple of things using the Css property, e.g. Css="svg { fill: #ffffff; }" with no luck. I'm not really familiar with how CSS and SVG play together.

Any help appreciated!

This is a great library, by the way!
David.

[klorman]

You need to specify the class in path like this: class="YourClassName" d="...">. And specify this class in Css: Css=".YourClassName { fill: #ffffffffff; }"

[d-mackenzie]

Thanks for your response.

I downloaded the icon from a website, so was hoping to avoid having to modify each one. I "resolved" my issue by finding another icon source that didn't have this, and I can set the color by doing Css="svg { fill: #ffffff; }" without having to touch the svg itself.

David.