New Material Library: Center icon, above the text inside button

Issue

I have this button and I want to center the icon inside it but it should also be above the text.

The thing is, there is an option to set gravity of icon, Which is app:iconGravity but it only has two options and none of them is center. If there's no text, setting the option to textStart moves the icon to the center but I want icon to be center and also above the text.

Here's the current code:

<com.google.android.material.button.MaterialButton
            android:id="@+id/payButton"
            style="@style/Widget.MaterialComponents.Button.Icon"
            android:layout_width="0dp"
            android:layout_height="96dp"
            android:layout_weight="1"
            android:fontFamily="@font/montserrat_regular"
            android:text="@string/pay"
            android:textColor="?attr/colorPrimary"
            app:backgroundTint="@android:color/white"
            app:icon="@drawable/ic_pay_black_24dp"
            app:iconGravity="textStart"
            app:iconSize="32dp"
            app:iconTint="@color/colorPrimary" />

Solution

It seems that they don't think it's a good idea/design but their designer agreed to add the functionality in a future version.

Here is a request/discussion around this topic on their repo: https://github.com/material-components/material-components-android/issues/671

Right now, the only possibilities that I've found are to:

• Use android:drawableTop instead of app:icon: which is poorly customizable
• Create you own custom view or layout and include it where you need it

I've just submitted a PR to add this feature, as it seems that they agree it should support top gravity.

---

Update (2021-02-17)

It should now be available on Material 1.3.0 by using one of the following options: app:iconGravity="top" or app:iconGravity="textTop"

Answered By - rewgoes