[FIXED] How do I achieve this rounded corner shape around icon of a selected bottom nav item with Jetpack compose

Issue

.
This is how my BottomNavigaionItem looks like.

 BottomNavigationItem(
                selected = selected,
                onClick = {...}
                icon = {
                        Icon(
                            imageVector = if (selected) navItem.iconFilled else navItem.iconOutlined,
                            contentDescription = navItem.route,
                           // modifier = Modifier.background(Color.DarkGray, shape = RoundedCornerShape(10.dp)).padding(10.dp)
                        )
                },
                label = {...},
                selectedContentColor = MaterialTheme.colors.onPrimary,
                unselectedContentColor = MaterialTheme.colors.onPrimary.copy(0.4f)
            )
        }
    }

Solution

Just use M3 and the NavigationBar:

NavigationBar {
    items.forEachIndexed { index, item ->
        NavigationBarItem(
            icon = { Icon(Icons.Filled.Favorite, contentDescription = item) },
            label = { Text(item) },
            selected = selectedItem == index,
            onClick = { selectedItem = index }
        )
    }
}

Answered By - Gabriele Mariotti
Answer Checked By - Candace Johnson (JavaFixing Volunteer)