Android - how to change item Icon of bottom navigation bar to a custom vector asset?

Question

GOAL

So my goal is that on item selection, I want to not only change color of chosen item's icon to desired one, but to add a background of another color

This icon (for example on clicking on pencil) is what I want , brown is for selected color & cream as the background.

FAILED APPROACH

This is a code for that background shape

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle"
    android:tint="@color/cream">

    <corners android:radius="@dimen/_6sdp"/>
    <solid android:color="@color/cream" />
    <size android:height="@dimen/_25sdp"
        android:width="@dimen/_25sdp"/>

</shape>

And this is the code for the layer-list to combine the pencil vector & the bg shape

<?xml version="1.0" encoding="utf-8"?>
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:drawable="@drawable/bottom_nav_selected_shape"
        android:gravity="center"/>
    <item
        android:id="@+id/temp"
        android:drawable="@drawable/pencil_20"
        android:gravity="center"
        />
</layer-list>

---

Now I also created selector.xml so on item click in bottom_nav_bar it can change color

<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
    <item
        android:state_checked="true"
        android:color="@color/brown"
        />
    <item
        android:state_checked="false"
        android:color="@color/cream"
        />
</selector>

I implemented the above code here in my bottom_nav_bar, here's a snippet of it!

<com.google.android.material.bottomnavigation.BottomNavigationView
            android:id="@+id/bottomNavigationView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            app:menu="@menu/bottom_nav_menu"
            android:background="@drawable/transparent_background"
            app:itemIconSize="@dimen/_30sdp"
            app:itemIconTint="@drawable/bottom_nav_selector"
            android:paddingVertical="@dimen/_9sdp"
            android:layout_marginHorizontal="@dimen/_16sdp"
            app:labelVisibilityMode="unlabeled" app:itemHorizontalTranslationEnabled="false"
            />

Suppose I assigned bottom nav menu icon to be the layer-list as I mentioned above

This is what I get as output

So it's entirely brown, while I want the backgroud to be cream, CAN Anyone help me with this?