Set background color of SVG Material Design Icons

Marc picture Marc · Nov 12, 2014 · Viewed 9.4k times · Source

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

Yash Vekaria picture Yash Vekaria · Feb 26, 2015

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>