Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Set background color of SVG Material Design Icons

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?

like image 766
Marc Avatar asked Nov 12 '14 17:11

Marc


1 Answers

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>
like image 199
Yash Vekaria Avatar answered Oct 01 '22 10:10

Yash Vekaria