how to change the svg sprite color? about material-design-icons HOT 3 CLOSED

This is an example of the only way i found to Color the SVG icon :

 <div style="color:red;"> COLORED
     <svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M22 12c2.76 0 5.26 1.12 7.07 2.93L24 20h12V8l-4.1 4.1C29.37 9.57 25.87 8 22 8 14.95 8 9.13 13.22 8.16 20h4.04c.93-4.56 4.96-8 9.8-8zm11.28 18.27c1.33-1.81 2.23-3.95 2.56-6.27H31.8c-.93 4.56-4.96 8-9.8 8-2.76 0-5.26-1.12-7.07-2.93L20 24H8v12l4.1-4.1c2.53 2.53 6.03 4.1 9.9 4.1 3.1 0 5.96-1.02 8.28-2.73L40 42.98 42.98 40l-9.7-9.73z"/></svg>
 </div>

Copy all the SVG code every time you need an icon ! Is not an elegant solution but is the only i found for the moment ! I try to use the md-icon directive but do not work for the moment !

from material-design-icons.

Here is what I did:

for x in *px.svg;do sed "s/<path/<path fill=\"#ffffff\"/" ${x%*.*}.svg > ${x%*.*}-white.svg ;done

This takes all SVGs in the current directory adds the fill color to the path and saves
the changed file with the suffix -white.
Hope this helps
(Works only with bash...)

from material-design-icons.

You should have a look at the sprite previews, e.g., http://google.github.io/material-design-icons/sprites/svg-sprite/svg-sprite-action.html

They show how to inline the sprite, and then reference the icon you want with a ...

The problem is that only inline SVGs can be styled, so to change the color, they have to be inline.

There are various ways you can make this more elegant, but for now, what's shown in those sprite preview HTML pages is the best approach I can suggest.

from material-design-icons.