How to center icon in a MaterialButton which has no text? How to center icon in a MaterialButton which has no text? android android

How to center icon in a MaterialButton which has no text?


Found it. The attribute I was missing was app:iconPadding="0dp".

So, from my experiments, the minimum attributes needed to create a square MaterialButton which has a centred icon and no text is the following:

<com.google.android.material.button.MaterialButton    android:layout_width="52dp"    android:layout_height="52dp"    android:insetLeft="0dp"    android:insetTop="0dp"    android:insetRight="0dp"    android:insetBottom="0dp"    app:icon="@drawable/icon_next"    app:iconGravity="textStart"    app:iconPadding="0dp" />

These attributes produce a MaterialButton as follows:

MaterialButton with square shape and centred icon


Change iconGravity to textStart and iconPadding to 0dp

    app:iconPadding="0dp"    android:padding="0dp"    app:iconGravity="textStart"


Add this style to the button

<Button style="@style/Widget.App.Button.IconOnly"/>

then in res/values/styles.xml add the following

<style name="Widget.App.Button.IconOnly" parent="Widget.MaterialComponents.Button">    <item name="iconPadding">0dp</item>    <item name="android:insetTop">0dp</item>    <item name="android:insetBottom">0dp</item>    <item name="android:paddingLeft">12dp</item>    <item name="android:paddingRight">12dp</item>    <item name="android:minWidth">48dp</item>    <item name="android:minHeight">48dp</item></style>

source: https://material.io/components/buttons/android