👋 Rookie question! I am trying to align the icon with the text so that they are on the same height. This is the code for reproducing it

@Composable
fun IconTopLeftText(
    backgroundImageId: Int,
    iconId: Int,
    padding: Int = 16,
    imagePadding: Int,
    text: String,
    textColor: Int,
    textSize: Int
) {
    Box(modifier = Modifier
        .padding(padding.dp)
        .semantics(true) { }) {
        val drawable = AppCompatResources.getDrawable(LocalContext.current, backgroundImageId)

        Image(
            rememberDrawablePainter( drawable ),
            contentDescription = null)
        Row(
            horizontalArrangement = Arrangement.Start,
            verticalAlignment = <http://Alignment.Top|Alignment.Top>,
        ) {
            Image(
                painter = painterResource(id = iconId),
                modifier = Modifier
                    .padding(end = imagePadding.dp),
                contentDescription = null
            )

            Text(
                text = text,
                fontSize = textSize.sp,
                color = colorResource(id = textColor)
            )
        }
    }
}

Any ideas what am I missing please?

Try to add some color to background of your Text and you may notice that it would be probably on the same height with icon

yes you are right! Thank you.Some offset of the text breaks it

Maybe using

Modifier.alignBy(FirstBaseLine)

on Image would allow you to achieve such behaviour.

I tried that, but it didn’t work unfortunately! thank you for your suggestion

There is an issue tracker to remove font padding. That's probably what would help here.

noted! thank you

Did you try to set

lineHeight

of the

Text

to the same height as the

Icon

? That might get the alignment for the first line in the paragraph.