Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Material Design icon colors

Which color should be the "dark" material icon?

On the official documentation (https://www.google.com/design/spec/style/icons.html#icons-system-icons at the bottom) it is 54 % black (grey), but all downloads of the material icons are either white or 100 % black.

enter image description here

Also on the new official site https://www.google.com/design/icons/ you can download either white or black, but not "grey"!

So I have to set 54 % to all downloaded icons for myself? Or did I miss something?

like image 843
chrisonline Avatar asked May 30 '15 09:05

chrisonline


People also ask

How do I change the color of my material design icons?

$(". material-icons"). css("color", themeColor); This will change color of the material icons inside an element eg input field.

How do I fill a color with material icon?

First make sure you have added Material Icon library. If this library is added just add the HTML css class format_color_fill to any element to add the icon. Material Design Format Color Fill Icon can be resized as per your need. You can manage size of icon(format_color_fill) by using font-size css style.

How many material design icons are there?

900+ icons all from a single, small file.


2 Answers

I am too late to reply but nevertheless I will answer the question since it may save lot of time for some developers. I myself being a developer struggled a lot while creating icons in different colors and since I am not a designer it was really hard. After lot of searching I found this plugin in Android Studio called Android Material Icon Generator. It creates all material icons in all colors with various sizes and also with opacity factor. This is great help for us developers who aren't good at designing. Also no need to download icons separately, This plugin is enough.

like image 177
rockfight Avatar answered Oct 15 '22 05:10

rockfight


In the Android Asset Studio there is a Generic Icon Generator with all the Material icons and you can select the color you want.

like image 33
Brais Gabin Avatar answered Oct 15 '22 05:10

Brais Gabin