How to get the true colors of an android:icon to show through in a Button

Question

I'm using this code:

            <Button
                android:id="@+id/play_pause_button"
                android:layout_width="match_parent"
                android:layout_height="wrap_content"
                app:icon="@drawable/pause"
                android:textAlignment="center"
                style="@style/Widget.Material3.Button.Icon"/>

And here's my icon's XML drawable code:

<vector android:height="1000dp" android:viewportHeight="48"
    android:viewportWidth="48" android:width="1000dp" xmlns:android="http://schemas.android.com/apk/res/android">
    <path android:fillColor="#0883d9" android:pathData="M20,24H10V8c0,-1.1 0.9,-2 2,-2h6c1.1,0 2,0.9 2,2V24z"/>
    <path android:fillColor="#0370c8" android:pathData="M18,42h-6c-1.1,0 -2,-0.9 -2,-2V24h10v16C20,41.1 19.1,42 18,42z"/>
    <path android:fillColor="#0883d9" android:pathData="M38,24H28V8c0,-1.1 0.9,-2 2,-2h6c1.1,0 2,0.9 2,2V24z"/>
    <path android:fillColor="#0370c8" android:pathData="M36,42h-6c-1.1,0 -2,-0.9 -2,-2V24h10v16C38,41.1 37.1,42 36,42z"/>
</vector>

But all I see is a white icon, like this:

Answer 1

The issue you're seeing is due to the default styling of the Widget.Material3.Button.Icon in Material Design 3. This style applies a tint to the icon, which is why your icon is appearing as white.

To fix this, you can override the iconTint attribute to null in your button's style, so that the original color of your drawable is used. Here's how you can do it:

Firstly, in your styles.xml, define a new style that inherits from Widget.Material3.Button.Icon and overrides the iconTint attribute:

<style name="MyButtonStyle" parent="Widget.Material3.Button.Icon">
    <item name="android:iconTint">@null</item>
</style>

Then, use this style in your button:

<Button
   android:id="@+id/play_pause_button"
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   app:icon="@drawable/pause"
   android:textAlignment="center"
   style="@style/MyButtonStyle"/>

With this change, your button should display the icon in its original colors.