Material Design icon colors

Question

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.

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?

Solution 1

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.

Solution 2

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

Solution 3

There are three ways I handle opacity:

a) Simple one, I download them (on materialdesignicons.com if I need the grey option) and use them, as I don't need to change anything in any way. If I don't find the one I need, I download the black (white) one and transform it into the 54% opacity version of it (it's a 30 seconds job on gimp/photoshop).

b) If I only need the "normal" and "pressed" state, I download the black (white) one, create the two versions, at 54% for natural and 87% for pressed, then I create a drawable file to combine them (you can handle focused too):

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
        <item android:state_pressed="true"
            android:drawable="@mipmap/settings_pressed" /> <!-- pressed -->
        <item android:state_focused="true"
            android:drawable="@mipmap/settings" /> <!-- focused -->
        <item android:drawable="@mipmap/settings" /> <!-- default -->
</selector>

c) If I need to change the opacity of the icon often in my code, I do it progammatically:

ImageButton mButton = (ImageButton) findViewById(R.id.button);
final Drawable buttonIcon = context.getResources().getDrawable(R.mipmap.your_icon);
buttonIcon.setAlpha(138); //this is the value of opacity 1~255
mButton.setBackground(buttonIcon);

Note that you can combine the methods b) and c), so you don't have to control the pressing change of opacity programmatically, but still be able to change its overall value as you need.