Jetpack compose. Center icon in ListItem

Question

How to properly center an icon in ListItem?

Column {
    ListItem(
        icon = {
            Icon(
                imageVector = Icons.Outlined.Delete,
                contentDescription = null
            )
        },
        secondaryText = { Text("secondaryText") },
        text = { Text("text") }
    )
    Divider()
}

gives this result

ListItem implementation uses explicit Box(contentAlignment = Alignment.TopStart) to place the icon. Mmm...why?

I can, of course, use paddings or create a custom ListItem, but there must be a standard solution.

user_2016562 · Answer

You can add the Modifier.size(40.dp) to the Icon

Something like:

    ListItem(
        text = { Text("Two line list item with 40x40 icon") },
        secondaryText = { Text("Secondary text") },
        icon = {
            Icon(
                Icons.Filled.Favorite,
                contentDescription = null,
                modifier = Modifier.size(40.dp)
            )
        }
    )

The ListItem follows the material guidelines:

Jetpack compose. Center icon in ListItem

1 Answers