How do I get the fill property to work on an svg?-CodePudding

A div with an img containing the svg

<div  onclick="toggleExpand()">
    <img src="Resources/iconmonstr-arrow-65.svg" alt="arrow">
</div>

I've tried using the svg as the background background: url('Resources/iconmonstr-arrow-65.svg') and using fill: white;

Also tried fill: white !important; but, it doesn't seem to be working.

what am I missing?

CodePudding user response：

If you open the .svg file, try adding the fill attribute to it. As an example: <svg fill="white"

As I understand from what you are trying to do, you are setting an image with SVG properties, such as fill, however this must be done directly to the SVG itself. Here is another example of a plain circle outline, filled with red.

<svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="red" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><circle cx="12" cy="12" r="10"></circle></svg>

For any other reasons, consider replacing <img src="Resources/iconmonstr-arrow-65.svg" alt="arrow"> simply with the svg itself - although its not the most ideal method, such as:

<div  onclick="toggleExpand()">
    <svg xmlns="http://www.w3.org/2000/svg" width="80" height="80" viewBox="0 0 24 24" fill="red" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" ><circle cx="12" cy="12" r="10"></circle></svg>
</div>