如何让Button中android:icon的真实颜色正常显示

我通过以下XML代码实现了一个Material3图标按钮：

<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"/>

对应的自定义矢量图标（@drawable/pause）代码如下：

<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>

实际显示效果中，图标变为白色，而非设置的蓝色：

问题原因 #

Material3的Widget.Material3.Button.Icon样式默认会对图标应用色调着色（tint），这一机制会覆盖矢量图中手动设置的fillColor，图标颜色会继承按钮主题的默认色调，最终显示为白色。

解决方案 #

• 直接禁用图标色调
  在Button标签中添加app:iconTint="@null"，让图标使用自身定义的颜色：

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

• 修改矢量图着色模式
  在矢量图的根<vector>标签中添加android:tintMode="src_atop"，保留自身颜色的同时兼容主题色调（如果不需要主题适配，推荐第一种方案）：

  <vector android:height="1000dp" android:viewportHeight="48"
      android:viewportWidth="48" android:width="1000dp" 
      android:tintMode="src_atop"
      xmlns:android="http://schemas.android.com/apk/res/android">
      <!-- 路径代码不变 -->
  </vector>
  

• 自定义全局按钮样式
  如果需要多个按钮都保留图标自身颜色，可以在styles.xml中定义自定义样式：

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

  之后在Button中引用该样式：style="@style/CustomIconButton"

内容的提问来源于stack exchange，提问作者TechyBenji