How to change android jetpack compose bottomAppBar icon tint color?

If you want to change the tint color of the image then you can use the colorFilter property of the Image

Image(
    painter = painterResource(R.drawable.ic_arrow_details), 
    contentDescription = "", 
    colorFilter = ColorFilter.tint(Color.Black)
)

In case you didn't want to change content color, and wanted to have an individual color for specific Icon, there is a tint property. Like:

Icon(
 Icons.Filled.PushPin, "",
 tint = MaterialTheme.colors.secondary
)

But as others said, you can use unselectedContentColor and selectedContentColor in your NavigationItem.

If you want to remove completly the tint color and you would like to use icon's colors then try with: tint = Color.Unspecified

For example:

Icon(
    modifier = Modifier.size(34.dp),
    imageVector = ImageVector.vectorResource(id = R.drawable.ic_your_icon),
    contentDescription = "Some icon",
    tint = Color.Unspecified
)

For BottomNavigation, you need to provide BottomNavigationItem to construct it, while constructing BottomNavigationItem, you can use Icon with tint as resource like below

BottomNavigation() {
    BottomNavigationItem(icon = { 
           Icon(asset = vectorResource(id = R.drawable.homeBottomNav), tint = Color.Blue) //this is tint
       }, selected = true, onClick = {})
}

With the 1.0.0 (tested with 1.0.0-beta06) in the BottomNavigationItem you can define the attributes:

• selectedContentColor
• unselectedContentColor

Something like:

    BottomNavigation(backgroundColor = Color.White) {
            BottomNavigationItem(
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
                icon = {
                    Icon(Icons.Filled.Add, "contentDescription")
                },
                selected = true,
                onClick = {})
            BottomNavigationItem(
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
                icon = {
                    Icon(Icons.Filled.Search, "contentDescription")
                },
                selected = false,
                onClick = {})
    }

Also since the default selectedContentColor is based on the LocalContentColor.current you can also use something like:

    BottomNavigation(backgroundColor = Color.White) {
        CompositionLocalProvider(LocalContentColor provides Color.Red) {
            BottomNavigationItem(
                icon = {
                    Icon(Icons.Filled.Add, "contentDescription")
                },
                selected = true,
                onClick = {})
            BottomNavigationItem(
                icon = {
                    Icon(Icons.Filled.Search, "contentDescription")
                },
                selected = false,
                onClick = {})
        }
    }

You can use unselectedContentColor and selectedContentColor.

BottomNavigationItem(
   unselectedContentColor = Color.Black,
   selectedContentColor = Color.Red,
   icon = {
       Icon(
           painter = painterResource(id = screen.iconResourceId),
           contentDescription = null)
           },
    selected = currentRoute == screen.route,
    onClick = { }
)

selectedContentColor changes color of Text and Icon, but not Image() Composable. So if you want to keep color of multicolor-icon when selected, one should use Image(). Also you want to make it grayscale when unselected, you can use colorFilter.

Plus if you don't want to change color of Text/Icon, then you can use Color.Unspecified.