Android FAB icon always black with MaterialComponents theme Android FAB icon always black with MaterialComponents theme android android

Android FAB icon always black with MaterialComponents theme


For MaterialComponents Theme you can define the following colors.

<style name="AppTheme" parent="Theme.MaterialComponents.Light.NoActionBar">        <item name="colorPrimary">@color/primary</item>        <item name="colorPrimaryDark">@color/primaryDark</item>        <item name="colorPrimaryVariant">@color/primaryVariant</item>        <item name="colorOnPrimary">@color/onPrimary</item>        <item name="colorSecondary">@color/secondary</item>        <item name="colorSecondaryVariant">@color/secondaryVariant</item>        <item name="colorOnSecondary">@color/onSecondary</item>        <item name="colorAccent">@color/accent</item>        <item name="colorSurface">@color/surface</item>        <item name="colorOnSurface">@color/onSurface</item>        <item name="colorError">@color/error</item>        <item name="colorOnError">@color/onError</item>        <item name="colorButtonNormal">@color/buttonNormal</item>        <item name="colorControlNormal">@color/controlNormal</item>        <item name="colorControlActivated">@color/controlActivated</item>        <item name="colorControlHighlight">@color/controlHighlight</item>        <item name="colorBackgroundFloating">@color/backgroundFloating</item>    </style>

colorSecondary is the responsible color for FloatingActionButton. and colorOnSecondary is the responsible color for icon color of FloatingActionButton.

In your AppTheme you have not defied the colorSecondary. So, it took the default black color from parent Theme.MaterialComponents.Light.DarkActionBar.

Reference : Android dev summit, 2018 - The Components of Material Design


As said in this answer, if your icon has multiple colors or if you want to retain your icon original color, then assign @null as the tint:

app:tint="@null"