Material-components-android: MaterialButton style does not support only Icon

[zishanj]

With the use of style Widget.MaterialComponents.Button.Icon I was expecting the layout to format according to icon only but it works just like Widget.MaterialComponents.Button.TextButton.Icon with requirement of adding text also along with icon.

[ymarian]

Hi, are you talking about the icon only buttons in the catalog demo?
Yes that was a somewhat contentious decision but the reason we have two styles named like that is because the spec defines different paddings for buttons with and without icons.
https://material.io/design/components/buttons.html

We don't provide a style at the moment for Icon Only but you can easily create your own:

eg:

<style name="IconOnlyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
   <item name="iconPadding">0dp</item>
   <item name="iconGravity">textStart</item>
</style>

[MahmoudAymann]

some useful adding to @ymarian answer :

<style name="IconOnlyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="iconPadding">0dp</item>
        <item name="iconGravity">textStart</item>
        <item name="rippleColor">@android:color/transparent</item>
        <item name="android:shadowColor">@android:color/transparent</item>
        <item name="strokeColor">@android:color/transparent</item>
    </style>

[sandrocsimas]

Is there a way to remove or decrease the padding? I tried setting the padding in the element and style but it does not work.

[dviecas]

@sandrocsimas I believe what you were looking for is called inset:

```
0dp
0dp
0dp
0dp

[sandrocsimas]

@dviecas, it's not working. The padding continues like the padding of a normal button without text and just the icon.
<com.google.android.material.button.MaterialButton android:id="@+id/save_first_name_button" style="@style/IconButton" android:layout_width="wrap_content" android:layout_height="wrap_content"/>
<style name="IconButton" parent="Widget.MaterialComponents.Button.OutlinedButton.Icon"> <item name="android:insetBottom">0dp</item> <item name="android:insetTop">0dp</item> <item name="android:insetLeft">0dp</item> <item name="android:insetRight">0dp</item> <item name="iconPadding">0dp</item> <item name="iconGravity">textStart</item> <item name="iconSize">@dimen/icon_md</item> </style>

[MatthewTighe]

I believe the issue is that there is no way to make the button any smaller than this:

This is using:

    <style name="IconOnlyButton" parent="Widget.MaterialComponents.Button.OutlinedButton">
        <item name="backgroundTint">@color/colorPrimary</item>
        <item name="iconTint">@color/colorIcon</item>
        <item name="iconPadding">0dp</item>
        <item name="iconGravity">textStart</item>
        <item name="rippleColor">@android:color/transparent</item>
        <item name="android:shadowColor">@android:color/transparent</item>
        <item name="strokeColor">@android:color/transparent</item>
        <item name="android:insetBottom">0dp</item>
        <item name="android:insetTop">0dp</item>
        <item name="android:insetLeft">0dp</item>
        <item name="android:insetRight">0dp</item>
        <item name="android:paddingBottom">0dp</item>
        <item name="android:paddingTop">0dp</item>
        <item name="android:paddingLeft">0dp</item>
        <item name="android:paddingRight">0dp</item>
    </style>

There seems to be a real need for small, self-contained icon buttons. Just two of them takes up easily a third of the screen. I think I can make precise enough clicks that the buttons could comfortably be just larger than the icon itself.

[Dem0n13]

I've found it more useful:

<style name="Widget.AppTheme.Button.IconButton" parent="Widget.MaterialComponents.Button.TextButton">
    <item name="android:minWidth">0dp</item>
    <item name="android:insetLeft">0dp</item>
    <item name="android:insetTop">0dp</item>
    <item name="android:insetRight">0dp</item>
    <item name="android:insetBottom">0dp</item>
    <item name="iconGravity">textStart</item>
    <item name="iconPadding">0dp</item>
    <item name="iconTint">@drawable/mtrl_btn_text_color_selector</item>
    <item name="rippleColor">?colorOnPrimary</item>
</style>

I reset minWidth to make button square, set rippleColor to show click effect and use mtrl_btn_text_color_selector as iconTint to add disabled state (got from here).

You can set cornerRadius to layout_width/2 and finally get this result: