How to round a container in jetpack compose

Question

I have a design to fulfill, which is an icon with a white background, which must be round. I have tried many possible ways but I have not been able to achieve that.

I attach the images and code of what I have done.

My current design:

How it should look:

My code:

Box(
    modifier = Modifier
        .background(Color.White)
        .clip(RoundedCornerShape(10.dp))
) {
    Icon(
        Icons.Outlined.StarOutline,
        modifier = Modifier
            .size(50.dp)
            .padding(10.dp),
        contentDescription = null
    )
}

Answer 1

The order of the modifiers matters, for what you are trying to achieve the composable should be first clipped and then apply that white background:

Box(
    modifier = Modifier
        .clip(RoundedCornerShape(percent = 50))
        .background(Color.White)
) {
    Icon(
        Icons.Outlined.StarOutline,
        modifier = Modifier
            .size(50.dp)
            .padding(10.dp),
        contentDescription = null
    )
}

I've also set the RoundedCornerShape to 50% so that it's circular as in the desired output.