Placing icon on top of text in MaterialButton

Question

I wanted to put the icon on top of the materialButton like shown here:

But I couldn't find any properties in MaterialButton to set the gravity of the app:icon to top. I could only able to set it to start or end. Is there any way to set the create a similar button without using Vertical LinearLayout with ImageView and TextView?

Answer 1

You can use the iconGravity="textTop".

    <com.google.android.material.button.MaterialButton
        style="@style/Widget.MaterialComponents.Button.TextButton"
        app:icon="@drawable/ic_add_24px"
        app:iconGravity="textTop" />

Note: It requires at least the version 1.3.0-alpha02.

Answer 2

You can use android:drawableTop attribute for this

Note : This is not only restricted for the MaterialButton you can use it on TextViews and other views also

Example Code :

<com.google.android.material.button.MaterialButton
    android:layout_width="match_parent"
    android:text="@string/app_name"  <!-- Your Text -->
    android:drawableTop="@drawable/ic_launcher_background" <!-- Your Icon -->
    android:layout_height="wrap_content"/>