0

I have a svg icon that is black I want to change the color to light-green. How can I do that within the following predefined style using only CSS?

.jp-SaveIcon {
  background-image: url(icons/md/save.svg);
}
James Draper
  • 5,110
  • 5
  • 40
  • 59
  • 1
    you would need to have the svg inserted into the html (you can do this by opening the file, copying its contents, and pasting it where you'd like it to sit), then you can use the `fill` css attribute. Alternatively, if your svg is monochromatic, you could turn it into a font using a service like [Fontastic.me](http://fontastic.me/) – haxxxton Jan 27 '17 at 01:38
  • @haxxxton thank you for the suggestion! The thing is I am working on a dark theme for my fork of [Jupyter Lab](https://github.com/jupyterlab/jupyterlab) and I was trying to implement this change without making too many changes to the source. – James Draper Jan 27 '17 at 01:49
  • 1
    see this -> http://stackoverflow.com/questions/24933430/img-src-svg-changing-the-fill-color –  Jan 27 '17 at 02:05
  • 1
    http://stackoverflow.com/questions/11978995/how-to-change-color-of-svg-image-using-css-jquery-svg-image-replacement –  Jan 27 '17 at 02:06

2 Answers2

1

I don't think you can change the color of the svg file using css, its like a image file, you need to change the color of svg file itself.

ha_ryu
  • 568
  • 2
  • 7
  • 20
  • Thanks for your feedback. So I know that it is possible change the color of an svg using CSS using the [filter property](http://www.w3schools.com/cssref/css3_pr_filter.asp) but I was wondering if it was possible to do something similar to `-webkit-filter: invert(1);` but instead filling a single color. – James Draper Jan 27 '17 at 01:59
  • how about this? you have to select svg in css if you want to use -webkit-filter. https://jsfiddle.net/x80vu45x/ – ha_ryu Jan 27 '17 at 02:26
  • Or just set the fill property on svg element. – Maciej Caputa Jan 27 '17 at 02:52
-1

It is possible to change color of svg, simply type

svg
  fill: [color] !imporant
Maciej Caputa
  • 1,831
  • 12
  • 20