Change icons in Material You bottom navigation bar in active and inactive states

Google recently released Material You (M3) for Android.

According to the design guidelines, as stated here: https://m3.material.io/components/navigation-bar/overview, bottom navigation bars' icons have to be outlined when inactive and filled when active(when there is a suitable outlined version of the icon).

However, in the implementation, I do not see any way to make the icons outlined when inactive and filled when active.

Do we have to upload 2 versions of the same icon, outlined and filled, and how do we link these 2 icons in our menu resource file?

As seen in the material design documentation, only 1 icon is defined for each menu item.

This results in a filled icon even in an inactive state, as seen below.

How do we make the icons filled and outlined based on its state? Does this have to be done programmatically or through XML?

Thank you.

you have to make a another drawable for this where you have to add one selected icon and unselected icon like this one

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

And than call this here

android:icon="your drawable name"