I have a

Button { 
 Text(...)
 Icon() // 24x24dp
}

Altough button content is a

RowScope

with

verticalArrangement = CenterVertical

,

Text

seems to not be vertically centered, you can see it's shifted down compared to Icon. Why is that and how can I fix this?

That shouldn’t be happening. Can you paste your full code snippet here?

@Chris Sinco [G] took me a while, but it seems I've uncovered some text rendering related bug in Compose. The key is to have some multiple lines spanning button and an external Roboto.ttf font (from Google fonts). Here's the code

private val Roboto = FontFamily(
  Font(R.font.roboto_medium, FontWeight.Medium),
)

@Composable
fun CustomButton(
  text: String,
) {
  androidx.compose.material.Button(
    onClick = { },
    modifier = Modifier.heightIn(min = 56.dp).fillMaxWidth(),
    shape = MaterialTheme.shapes.medium,
  ) {
    Text(
      text = text,
      textAlign = TextAlign.Center,
      style = TextStyle(
        fontFamily = Roboto,
        fontWeight = FontWeight.Medium,
        fontSize = 16.sp,
      )
    )
    Icon(
      Icons.Filled.Face,
      contentDescription = null
    )
  }
}

@Preview(showBackground = true, widthDp = 360)
@Composable
fun StoryBookButtons1() {
  Column(
    horizontalAlignment = Alignment.CenterHorizontally
  ) {
    CustomButton(
      text = "A very very very long button not fitting one one line",
    )
    CustomButton(
      text = "Continue",
    )
  }
}

Interesting - yes please verify on device in case it’s just Preview

Verified + reported: https://issuetracker.google.com/issues/189353121

Thanks! Triaged