Changing color of material icons?

Question

I downloaded a number of material icons from here:

I'm confused as to how I change the color of these icons as drawables. I have one Button with an icon in the drawableLeft property, and then a number of ImageButton with icons set, like so:

<Button
    android:text="Hey"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:drawableLeft="@drawable/ic_arrow_upward_black_24dp"
    android:stateListAnimator="@null" />

<ImageButton
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    app:srcCompat="@drawable/ic_arrow_downward_black_24dp"
    android:background="@null" />

How do I change the color of the icons for each?

Additionally, if the icons I downloaded are black, how can I change the color of the icons to a color with transparency?

score 43 · Answer 1 · answered Jan 05 '17 at 19:25

You do realize All the Material Icons at https://material.io/icons/ are now available in Android studio, No need to even download them. Just right click on drawables > New > Vector Asset

You will get a dialog like

After click on the little Android icon, select your image and save. This will the create an xml drawable Which can be opened and edited to your liking

Here is how it will look like

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:alpha="0.8" <!--set the transparency from here -->
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000" <!-- Use this for setting your color -->
        android:pathData="M9.4,16.6L4.8,12l4.6,-4.6L8,6l-6,6 6,6 1.4,-1.4zM14.6,16.6l4.6,-4.6 -4.6,-4.6L16,6l6,6 -6,6 -1.4,-1.4z"/>
</vector>

I want to create more accounts so that I can upvote this answer more times. Google needs to update their material icons website to reflect this information! — Robert, Oct 28 '17 at 23:38
Vector drawables used to have poor support on earlier versions of Android (requiring the use of multiple pngs). But the latest versions of AppCompat will allow you to use vector drawables like this even when supporting older versions: https://stackoverflow.com/questions/40678947/how-to-properly-use-backwards-compatible-vector-drawable-with-the-latest-android — mkasberg, Nov 12 '17 at 17:59

score 10 · Answer 2 · answered Jan 05 '17 at 19:07

10

Add this to your ImageButton in your xml layout file

android:tint="@color/black"
android:tintMode="@color/black"

answered Jan 05 '17 at 19:07

firegloves

5,581
2
29
50

What versions of Android is this compatible with? What about `Button`? – Jan 05 '17 at 19:08
1

Also, if I try setting a transparent color this way, they show up as mostly black (I'm assuming because the downloaded icon is black, and the tint is just applying the transparent color over the black, instead of replacing the black). – Jan 05 '17 at 19:11
For me `tintMode` was not necessary. – Alaa M. Jul 05 '20 at 16:54

score 2 · Answer 3 · answered Jan 05 '17 at 19:15

2

If your icons are vectors, you can edit the xml file and change the android:fillColor attribute. If the icons are bitmaps, you can add android:tint attribute to the ImageButton.

answered Jan 05 '17 at 19:15

Karol Jurski

180
1
10

score 1 · Answer 4 · edited May 23 '17 at 10:31

1

All of the appcompat widgets support the android:tint="@color/somecolorresource" attribute. If your activity/fragment extends AppCompatActivity/Fragment this will work for any ImageView/TextView/ImageButton/....

See: https://stackoverflow.com/a/37261384/3662251

edited May 23 '17 at 10:31

Community

1
1

answered Jan 05 '17 at 19:10

code_mc

171
10

If I try setting a transparent color this way, they show up as mostly black (I'm assuming because the downloaded icon is black, and the tint is just applying the transparent color over the black, instead of replacing the black). – Jan 05 '17 at 19:11
The tint is applied by using a color filter. This is most likely causing the actual color to "leak" when you use a transparent color. – code_mc Jan 05 '17 at 19:12
1

You can use a regular color and use the `android:alpha="0.5"` attribute on the view to make it transparent. – code_mc Jan 05 '17 at 19:14

score 0 · Answer 5 · answered Jan 05 '17 at 19:22

0

This link is great for editing icons, you can generate icons with transparent background too. hope this helps.

answered Jan 05 '17 at 19:22

Simo

345
4
12

Changing color of material icons?

5 Answers5