Reduce padding in NavigationBar with Material 3

Question

I'm using the new Material 3 NavigationBar and NavigationBarItem components, I want the NavigationBar to be thinner, because the default one is too large. I want one similar to the one Gmail or Drive has (see picture at the end for the comparison). Making the icon smaller doesn't work, and neither changing all the available paddings (Icon, NavigationBar and NavigationBarItem).

This is the Composable code, if I change the NavigationBar heigh (using Modifier) then this happens:

I primarly want to remove the space between the label and the bottom, and the one between the top and the icon.

@Composable
fun MyAppBottomBar(navController: NavController, tabs: Array<MenuBottom>) {
    val navBackStackEntry by navController.currentBackStackEntryAsState()
    val currentRoute = navBackStackEntry?.destination?.route ?: MenuBottom.INICIO.route
    val rutas = remember { MenuBottom.values().map { it.route } }
    if (currentRoute in rutas) {
        NavigationBar(containerColor = elevation01) {
            tabs.forEachIndexed { index, item ->
                NavigationBarItem(
                    selected = currentRoute == item.route,
                    onClick = {
                        if (item.route != currentRoute) {
                            navController.navigate(item.route) {
                                popUpTo(navController.graph.startDestinationId) {
                                    saveState = true
                                }
                                launchSingleTop = true
                                restoreState = true
                            }
                        }
                    },
                    label = { Text(stringResource(id = item.title)) },
                    icon = {
                        if (item.route == currentRoute) {
                            Icon(item.selectedIcon, contentDescription = null, tint = Color.Black)
                        } else {
                            Icon(item.unselectedIcon, contentDescription = null)
                        }
                    },
                    colors = NavigationBarItemDefaults.colors(
                        selectedIconColor = Color.Black,
                        unselectedIconColor = Color.Black,
                        indicatorColor = Greenyellow,
                        selectedTextColor = Color.Black,
                        unselectedTextColor = Color.Black
                    )
                )
            }
        }
    }
}

Answer 1

NavigationBar does not use padding. It uses a fixed height. While working with MUI (which is a React implementation of Material design) I found that they use a fixed height, and margin: auto to center items vertically. Then I figured jetpack compose NavigationBar might do the same and the idea was right. The solution is:

NavigationBar(
    modifier = Modifier.height(64.dp)
) {...}

Or change it to your taste. It will shrink and grow the space taken up.