How to change the color of single color .svg file via css?

Question

I'm using SVG icon like below and I don't want to use icon font (which I already know is easier to change color)

<img src="/images/ic_play_arrow_black_24px.svg">

By default, this icons is in black color and I want to change it to green.

What is the best way to do it with less effort?

url of arrow file https://storage.googleapis.com/material-icons/external-assets/v1/icons/svg/ic_play_arrow_black_24px.svg

set the colour in the svg file itself is easiest. Especially as anything else is impossible. — Robert Longson, Aug 15 '15 at 07:56
@RobertLongson - Do you mean to edit the .svg file in any svg editor? — Jitendra Vyas, Aug 15 '15 at 07:57
Spot on, that's what I mean. Or a text editor at a pinch, it's only XML. — Robert Longson, Aug 15 '15 at 07:59
@RobertLongson - Ok if no other faster solution possible then I will do this. I have lots of icons and just need to change the color of all of them to the different color I want. I though if it could be possible without editing each file will save a lot of time :-) — Jitendra Vyas, Aug 15 '15 at 08:02
Don't use an img, you can inject CSS if you use an object tag. http://stackoverflow.com/questions/4906148/how-to-apply-a-style-to-an-embedded-svg — Robert Longson, Aug 15 '15 at 08:03
if you want a script that transforms svg source to inline check [this](http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement/) — maioman, Aug 15 '15 at 12:34

score 2 · Answer 1 · answered Aug 15 '15 at 08:09

You can define the SVG in the page (although there are JS solutions for off page definitions) as a symbol or defs and then use an..ahem, use element with a class....but that may be more work than you want.

svg {
  display;
  inline-block;
  width: 24px;
}
.hidden {
  display: none;
}
.red {
  fill: red;
}
.green {
  fill: green;
}

<svg class="hidden" fill="#000000" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <g id="arrow">
      <path d="M8 5v14l11-7z" />
      <path d="M0 0h24v24H0z" fill="none" />
    </g>
  </defs>
</svg>

<svg>
  <use xlink:href="#arrow" class="red" />
</svg>

<svg>
  <use xlink:href="#arrow" class="green" />
</svg>

How to change the color of single color .svg file via css?

1 Answers1