Jetpack Compose - BottomNavigationItem swapping Icons

Question

I am trying to figure out if there is a way to change the Image used by my Composable Icon based on the selected states, similar to how selectedContentColor and unselelectedConstentColor change based on selected state.

I have the following code:

@Composable
fun BottomNavigation(navController: NavController) {
       val items = listOf(
        BottomNavItem.Home,
        BottomNavItem.Track,
        BottomNavItem.Clothes,
        BottomNavItem.Logs,
        BottomNavItem.Ideas,
        BottomNavItem.Sessions
    )
    BottomNavigation(
        modifier = Modifier
            .height(90.dp)
            .padding(0.dp),
        backgroundColor = colorResource(id = R.color.Black),
        contentColor = colorResource(id = R.color.Black)

    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.forEach { item ->
            BottomNavigationItem(
                modifier = Modifier
                    .scale(.7F)
                    .fillMaxHeight()
                    .requiredHeight(90.dp)
                    .padding(0.dp),
                selected = currentRoute == item.screen_route,
                icon = {
                    Image(painterResource(id = item.icon), contentDescription = "none")
                },
                selectedContentColor = Color.White,
                unselectedContentColor = Color.Black.copy(0.6f),
                alwaysShowLabel = false,
                onClick = {
                    navController.navigate(item.screen_route) {
                        navController.graph.startDestinationRoute?.let { screen_route ->
                            popUpTo(screen_route) {
                                saveState = true
                            }
                        }
                        launchSingleTop = true
                        restoreState = true
                    }
                }
            )
        }
    }
}

The goal would be to have the following change based on selected status. While this doens't work, its essentially,

if (selected){ icon = { Image(painterResource(id = item.icon_on), contentDescription = "selected")} }else{
icon = { Image(painterResource(id = item.icon_off), contentDescription = "not selected")}
}

I tried to use this logic and define a new variable before the BottomNavigationItem composable function is called, but that didn't work. Likewise, trying to use an if in the parameters doesn't work.

Answer 1

Thanks to the comment below I figured out (though I thought I tried this already).

icon = { if(currentRoute == item.screen_route){
 Image(painterResource(id = item.icon_on), contentDescription = "none")
}else{
 Image(painterResource(id = item.icon_off), contentDescription = "none")
}
},