0

Hi is there a way to change color of svg image of background like this

  .icon {
    background: url("~images/icon.svg") center no-repeat;
  }
<i class="icon"></i>

For example I need it icon to fill with blue color, but it is not possible, with background like this, is there any way?

lilo
  • 185
  • 1
  • 4
  • 17
  • Look [here](https://stackoverflow.com/questions/13367868/how-to-modify-the-fill-color-of-an-svg-image-when-being-served-as-background-ima) – Adrian Kokot Sep 13 '21 at 16:04

2 Answers2

1

If you load your SVG in the HTML as an Element instead of a Background Image CSS Attribute you can change the fill property of that Element

#mySVG
{
  fill: red !important;
}
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="#000" viewBox="0 0 16 16" id="mySVG">
  <path d="m8 2.748-.717-.737C5.6.281 2.514.878 1.4 3.053c-.523 1.023-.641 2.5.314 4.385.92 1.815 2.834 3.989 6.286 6.357 3.452-2.368 5.365-4.542 6.286-6.357.955-1.886.838-3.362.314-4.385C13.486.878 10.4.28 8.717 2.01L8 2.748zM8 15C-7.333 4.868 3.279-3.04 7.824 1.143c.06.055.119.112.176.171a3.12 3.12 0 0 1 .176-.17C12.72-3.042 23.333 4.867 8 15z"/>
</svg>
Clout Hack
  • 65
  • 8
0

If the SVG has a transparent background, you can set background-image to the SVG and background-color as you see fit. They will stack.

AdamJ
  • 184
  • 1
  • 1
  • 11