Why all png files are black and white, no colors? about material-design-icons HOT 10 CLOSED

For the web, we'd encourage you to use the SVGs and style them to produce other colors.
For Android or iOS, you can tint PNG assets pretty easily.

We can see if we can publish an article about that.

@addyosmani do you know of any good resources about coloring assets for the web or other platforms?

We can add some scripts to help you create colored versions of these as well.

from material-design-icons.

Install imagemagick
and try below command... works well for me
convert ic_apps_white.png -fuzz 75% -fill red -opaque white ic_apps_red.png

from material-design-icons.

Icon font #1 is also a good way to colorize things.

from material-design-icons.

I think it's not easy to tint PNG. I have to use photoshop to color it. If there's a website, just choose a pretty color, and preview the new icon, it would be better.

from material-design-icons.

@addyosmani do you know of any good resources about coloring assets for the web or other platforms?

@jestelle I've tried looking for npm modules that might help here. The challenge is faithfully tinting / re-coloring gets a little tricky to generate something you can reliably use. I'd personally use the same suggestion as you (SVG files).

I can explore writing a tinting tool to help, but did you mention you already have some scripts that can do color PNG generation?

from material-design-icons.

When I suggested tinting PNGs, this is what I had in mind:
http://jsfiddle.net/6avaeo5o/

Didn't actually use tinting, but actually used the icon as a mask, as a means to create an alternate color version of the icon.

Unfortunately this doesn't work in IE though, so maybe not realistic for most of you.
Although there might be some way to make it work in IE... maybe relying on SVGs for your masking...
http://thenittygritty.co/css-masking

from material-design-icons.

Ultimately using SVG or icon fonts may be a better choice :) but it's fun to explore other possibilities.

from material-design-icons.

Solved by using https://github.com/gclsoft/UIImage-Color on iOS

from material-design-icons.

Anyone know how to resolve this for Android? Writing for low-end devices, and can't use vector drawables.

EDIT: You can use imageView.setColorFilter

from material-design-icons.

Closing this issue because I believe it has been addressed. If not, feel free to reopen this issue or create a new one with more information.

from material-design-icons.