Material-design-icons: Changing SVG icon colors

Created on 21 Oct 2014 · 7Comments · Source: google/material-design-icons

At the moment, coloring the SVG icons dynamically is very difficult.

Issue is that it uses the svg icons as a background-image, which cannot be directly manipulated by the DOM. As a developer, this limits the use of the material-design-icons compared to, say, bootstrap glyphicons, which are powerful because they're treated in css as fonts.

Could there be an easy way to inject the SVG directly in-line to the HTML? At the moment I have to directly edit the XML or the SVG file itself to achieve the results I'd like.

Source

riotcku

All 7 comments

Hi,

do you know
https://icomoon.io

and especially
https://icomoon.io/app/#/select

This app allows you to upload your SVG and create fonts from your svg's.

Maybe useful.

PolHenri on 21 Oct 2014

👍1

I hope Google add those icons as webfonts soon =)

bryanisimo on 21 Oct 2014

@PolHenri thank you for the suggestion. That is an excellent web app I have not seen before.

However, with the way google's SVG is currently organized (One very vertically long SVG) does not play well with this app. The reason is below.

It is clever the way google decided to display the SVG (one long svg, display by hard coding the background-position of the svg into the matching class) but this method prevents the use of IcoMoon. I'd have the splice individual svgs, and at that point I might as well just edit that myself to play nice with my software.

This is one of the best free icon packs for developers. I do hope to see some statement on whether these icons will be available as webfont form.

riotcku on 21 Oct 2014

Stay tuned on the icon font front – we've got something in the works.

But in the meantime, all the individual SVGs are included in this repo.

jestelle on 22 Oct 2014

Webfont! Webfont! Webfont!

AndreLion on 5 Feb 2015

👎1

Yay! Thank you Google :)

riotcku on 5 Feb 2015

2015-02-05 18:10 GMT+02:00 Andre [email protected]:

Webfont! Webfont! Webfont!

—
Reply to this email directly or view it on GitHub
https://github.com/google/material-design-icons/issues/18#issuecomment-73072740
.

Mohamed Yehia
Service Internet & Network
Mob:+2 01144588894