what’s the equivalent of “a view that i need to treat as a bounding box for a single icon” ? could b...

# compose

[oday]

what’s the equivalent of “a view that i need to treat as a bounding box for a single icon” ? could be Column or Row or even Box really, right?

[oday]

this bounding box would be like 40dp for example, and the icon is 24 in the center

[Stylianos Gakis]

Could be

Box(Modifier.size(40.dp) {
  Icon(Modifier.align(Alignment.Center).size(24.dp))
}

If this happens to be a clickable one, you can use the built-in solution of

IconButton(onClick = {}) {
  Icon()
}

Since IconButton knows how to size itself to comply with accessibility standards plus it sets its content as contentAlignment = Alignment.Center automatically.

[oday]

Yes that's what I did thanks !

[Albert Chang]

Or just Icon(modifier = Modifier.size(40.dp).wrapContentSize(align = Alignment.Center).size(24.dp)).

[Stylianos Gakis]

TIL .wrapContentSize exists 🤯 Thanks Albert!

[oday]

that’s cool @Albert Chang but how does that work exactly, how did that become equivalent to a Box with modifier size 40 and inside an Icon size 24 ?

[Albert Chang]

Modifier.wrapContentSize() aligns the content (including the modifiers coming after it) within the min size constraints passed in (including the modifiers coming before it).