I have a ```Button { Text(...) Icon() // 24x24...

# compose

[dimsuz]

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?

[Chris Sinco [G]]

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

[Chris Sinco [G]]

I tried to repro in beta07 but could not

[Chris Sinco [G]]

Code

Button(
    onClick = { },
    modifier = Modifier
        .height(72.dp)
        .fillMaxWidth(),
    shape = MaterialTheme.shapes.medium
) {
    Text("Log in".toUpperCase())
    Icon(
        imageVector = Icons.Default.Face,
        contentDescription = null
    )
}

[Chris Sinco [G]]

For a second I thought it might be a bug with the locale, but doesn’t seem to be

[dimsuz]

@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",
    )
  }
}

[dimsuz]

here's the result

[dimsuz]

(updated code snippet, added val Roboto)

[dimsuz]

Here's the ttf in question

roboto_medium.ttf

[dimsuz]

If you remove the first button, Continue becomes v-centered again.
If you use another font (from MaterialTheme), bug is not reproducable either

[dimsuz]

Note that I use Studio preview, didn't check on the real device yet. Can it be a Studio rendering bug?

[Chris Sinco [G]]

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

[dimsuz]

Verified + reported:

https://issuetracker.google.com/issues/189353121

[Chris Sinco [G]]

Thanks! Triaged