Floating Action Button icon not in the center

Question

None of the other answers on SO helped me.

Here is my FAB xml:

<com.google.android.material.floatingactionbutton.FloatingActionButton xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    android:id="@+id/fabTransfer"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="bottom|end"
    app:fabCustomSize="@dimen/fab_size_normal"
    android:layout_margin="16dp"
    app:srcCompat="@drawable/ic_add_white_24dp" />

Here is the icon xml:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24.0"
    android:viewportHeight="24.0">
<path
    android:fillColor="#FFFFFFFF"
    android:pathData="M19,13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/>
 </vector>

And yet my icon looks like this!

Any ideas what's going on? I have tried with other icons too (pngs and vectors) and it's still the same.

Answer 1

The solution was to add a style to the FAB which extends Widget.MaterialComponents.FloatingActionButton

<style name="MyFabStyle" parent="Widget.MaterialComponents.FloatingActionButton">
        <item name="backgroundTint">@color/fab_background</item>
        <item name="rippleColor">#0d9bed</item>
</style>