VectorDrawable is not displayed correctly in RadioButtons / CheckBox

Question

The problem: I have a vector drawable that is not displayed correctly in RadioButton / CheckBox. There is shown only a grey circle, while I need a tick within a brown circle. Here goes the vector:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="22dp"
    android:height="23dp"
    android:viewportWidth="22"
    android:viewportHeight="23">
    <path
        android:fillColor="#8a3511"
        android:fillType="evenOdd"
        android:pathData="M11,11m-11,0a11,11 0,1 1,22 0a11,11 0,1 1,-22 0" />
    <group>
        <clip-path android:pathData="M11,11m-11,0a11,11 0,1 1,22 0a11,11 0,1 1,-22 0" />
        <path
            android:fillColor="#00000000"
            android:fillType="evenOdd"
            android:pathData="M4.5,11.5L8,15 16,7"
            android:strokeWidth="1"
            android:strokeColor="#FFF" />
    </group>
</vector>

Here is the state drawable:

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item android:drawable="@drawable/check_icon" />
</selector>

Here is the usage:

    <com.google.android.material.checkbox.MaterialCheckBox
        android:layout_marginStart="64dp"
        android:id="@+id/checkbox"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_gravity="center|end"
        android:button="@drawable/checkbox"
        />

And here is the visual result:

Yes, the grey circle is all I get from this:

Answer 1

Try to use androidx.appcompat.widget.AppCompatCheckBox instead CheckBox