0

A div with an img containing the svg

<div class="expand-button" 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?

Estif
  • 55
  • 6
  • 2
    You can't alter an SVG that is held in a file in this way. If you need to alter the color dynamically then put the SVG inline. If you need it just the once then alter the file version. – A Haworth Dec 28 '21 at 07:41
  • 1
    Also discussed in detail here: [How to change the color of an svg element?](https://stackoverflow.com/questions/22252472/how-to-change-the-color-of-an-svg-element?r=SearchResults&s=2|167.5468). – herrstrietzel Dec 29 '21 at 00:53

1 Answers1

3

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" class="feather feather-circle"><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 class="expand-button" 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" class="feather feather-circle"><circle cx="12" cy="12" r="10"></circle></svg>
</div>
Cohen
  • 2,375
  • 3
  • 16
  • 35