How to move the image inside the toggle button next to the text?

Question

I'm making a toggle button that changes the unit as the button is pressed. I put an image on the toggle button.

I used the drawableLeft property to put an image on the toggle button. (The image inside the toggle button is a temporary image.)

However, this property is attached to the far left side of the button and cannot be moved next to the text.

There is a drawablePadding property, but the text is moving, and the image and text are not centered.

There is an icon and iconGravity property inside the material button , which is possible, but These properties do not apply to ToggleButton .

Is there no way?

<ToggleButton
            android:id="@+id/unit"
            android:layout_width="30dp"
            android:layout_height="wrap_content"
            android:background="?android:selectableItemBackground"
            android:drawableLeft="@drawable/ic_add_routine"
            android:textOff="kg"
            android:textOn="lbs"
            android:textSize="14dp"
            android:layout_weight="1"/>

Answer 1

Please check this (Updated):

<ToggleButton
    android:id="@+id/unit"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:background="?android:selectableItemBackground"
    android:textOff="kg"
    android:textOn="lbs"
    android:paddingLeft="20dp"
    android:drawableStart="@drawable/ic_add_routine"
    android:drawableLeft="@drawable/ic_add_routine"
    android:gravity="left|center_vertical"/>

Output: