i have 2 iconbuttons. ```IconButton( modifier = Modifier.size(MESSAGE_CHECKMARKS_CONTAINER_SIZE)...

# compose-desktop

[Zoff]

i have 2 iconbuttons.

IconButton(
    modifier = Modifier.size(MESSAGE_CHECKMARKS_CONTAINER_SIZE)
        .align(Alignment.Bottom)
        .background(Color.Transparent, CircleShape),
    icon = Icons.Filled.Check,
    iconTint = color1,
    enabled = false,
    iconSize = MESSAGE_CHECKMARKS_ICON_SIZE,
    contentDescription = "Message delivered",
    onClick = {}
)

and a second one right next to it. but there is a lot of space between which does not look like i want it:
can i put them closer together? or sort of overlap them a bit. so that the check marks are really close to each other. without actually making an svg image for it?

[Ivan Matkov]

quick and dirty - Modifier.offset(x = -10.dp)

[seb]

If you want to have one singular button with two checkmarks, I would recommend creating a dedicated icon. This way you can also do things like making the two ticks have some minimum empty gap between each other, etc. If you insist on not wanting a new SVG asset, the least worst approach is this:

IconButton(modifier = Modifier.size(MESSAGE_CHECKMARKS_CONTAINER_SIZE), onClick = { /* doSomething() */ }) {
  Box {
    Icon(Icons.Filled.Check, contentDescription = "Message delivered")
    Icon(Icons.Filled.Check, contentDescription = null, Modifier.padding(start = 4.dp)) // or whatever
  }
}

This way it's one single button instead of two overlapping ones, which would look super weird. There can be clipping/alignment issues depending on the icons you use, and it's generally just not a great idea.

[Zoff]

nice. i will try that

[Zoff]

that worked like a charm. thanks