https://kotlinlang.org logo
#compose
Title
# compose
m

Mark

10/20/2023, 4:57 AM
What’s the correct way to style and align an icon so it seamlessly fits alongside text (when using a
Row
)? Here’s my current approach, but perhaps I should be doing some alignment with baseline etc.
Copy code
Row(
    modifier = Modifier.padding(horizontal = 8.dp),
    verticalAlignment = Alignment.CenterVertically,
) {
    val textStyle = LocalTextStyle.current.merge(
        fontSize = MaterialTheme.typography.subtitle2.fontSize,
        fontWeight = FontWeight.Bold,
    )
    Text(
        text = "foo title".uppercase(),
        style = textStyle,
        modifier = Modifier.padding(vertical = 6.dp),
    )
    val iconSize = with(LocalDensity.current) {
        textStyle.fontSize.toDp()
    }
    Icon(
        imageVector = Icons.Default.Lock,
        tint = textStyle.color,
        modifier = Modifier.size(iconSize),
        contentDescription = null,
    )
}
2 Views