How to create a circular Outlined button with jetpack compose

Question

I am trying to create a circular OutlinedButton with an icon in the center without text.

    OutlinedButton(onClick = { /*TODO*/ },
        shape = CircleShape,
        border= BorderStroke(1.dp, Color.Blue)
    ) {
        Icon(Icons.Default.Add, contentDescription = "content description")
    }

The final button has an oval shape:

Using an IconButton:

    IconButton(onClick = {  },
        modifier = Modifier
            .clip(CircleShape)
            .border(1.dp, Color.Red)
    ) {
        Icon(Icons.Default.Add, contentDescription = "content description",tint = Color.Red)
    }

This is the final result:

Answer 1

You can use the OutlinedButton removing the contentPadding.
Something like:

    OutlinedButton(onClick = { /*TODO*/ },
        modifier= Modifier.size(50.dp),  //avoid the oval shape
        shape = CircleShape,
        border= BorderStroke(1.dp, Color.Blue),
        contentPadding = PaddingValues(0.dp),  //avoid the little icon
        colors = ButtonDefaults.outlinedButtonColors(contentColor =  Color.Blue)
    ) {
         Icon(Icons.Default.Add, contentDescription = "content description")
    }

or the IconButton removing the clip modifier and using the shape inside the border parameter:

    IconButton(onClick = {  },
          modifier = Modifier
              .then(Modifier.size(50.dp))
              .border(1.dp, Color.Red, shape = CircleShape)
              ) {
        Icon(Icons.Default.Add, contentDescription = "content description", tint = Color.Red)
    }

Answer 2

There is not an outlined icon button component in the M2 package (androidx.compose.material), but in M3 (androidx.compose.material3), since v1.0.0-alpha10 released April 20, 2022, there is an OutlinedIconButton, you can use it as follows:

import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedIconButton

OutlinedIconButton(onClick = { /* doSomething() */ }) {
    Icon(Icons.Outlined.Lock, contentDescription = "Localized description")
}

Similarly there are FilledIconButton and FilledTonalIconButton for the other M3 styles.