Set background color of SVG Material Design Icons

Question

I make use of the Material Design Icons using the method described here:

https://github.com/google/material-design-icons#using-svg-sprites

However, the icons always end up in black. How am I supposed to change their color, say, into white?

I am aware of the possibility that the SVG source code can be edited so achieve the effect, but this does not seem to be the canonical way to go. The material design icons repository has their CSS image sprites in different versions depending on the color, while the SVG is in just one color (in fact, in no color because no color is ever mentioned in the SVG code). If I needed different SVG sprite files for white or for black icons, they would have included different versions as they did in the case of CSS image sprites, wouldn't they?

Answer 1

It should just be a matter of setting fill property for your icon. For example, add a class called "red" to your icon <div>:

<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims red"></div>

Then define the class red" in your CSS.

.red {
   fill: #ff0000;
}

Note that you set the fill colour of SVG elements with the fill property, not 'color' etc as with HTML elements.

Answer 2

I had the same problem - ended up changing fill in source of icon:

<path d="M0 0h24v24h-24z" fill="none"/>
<path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z"
      fill='white'/>

Answer 3

I was facing the exact same problem. Only solution that worked for me was to manually edit .svg files to add fill="white" in each path. However, I did not like hard-coding colors in .svg files.

Since I was using angularjs in my project, I wrote-up an angularjs directive that generates svg icons with custom fill-color / size. I'm sharing it here, in case someone finds it useful: https://klarsys.github.io/angular-material-icons/demo.html

Answer 4

The given code is example of an icon of "left chevron" of google material design.

Now if u wanted to change the color of an icon the add fill property in 1st path tag.

and if you wanted to change its background color the add fill property in 2nd path tag. For no background color give none to its property.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
    <path d="M15.41 7.41l-1.41-1.41-6 6 6 6 1.41-1.41-4.58-4.59z" fill="#fff"/>
    <path d="M0 0h24v24h-24z" fill="none"/>
</svg>