Icons getting disappears if the text is too long in Jetpack Compose

Question

@Composable
fun TopAppBar(
    name: String,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .padding(20.dp, 0.dp),
        verticalAlignment = Alignment.CenterVertically,
        horizontalArrangement = Arrangement.SpaceBetween
    ) {
        Icon(
            imageVector = Icons.Default.ArrowBack,
            contentDescription = "Back",
            tint = Color.Black,
            modifier = Modifier.size(24.dp)
        )
        Text(
            text = name,
            overflow = TextOverflow.Ellipsis,
            fontWeight = FontWeight.Bold,
            fontSize = 20.sp,
            maxLines = 1
        )

        Row {
            Icon(
                painter = painterResource(id = R.drawable.ic_bell),
                contentDescription = null,
                tint = Color.Black,
                modifier = Modifier
                    .padding(8.dp, 8.dp)
                    .size(24.dp)
            )
            Icon(
                painter = painterResource(id = R.drawable.ic_dotmenu),
                contentDescription = null,
                tint = Color.Black,
                modifier = Modifier
                    .padding(8.dp, 8.dp)
                    .size(24.dp)
            )
        }

    }
}

Answer 1

You have to set the weight and the fill to false:

    Text(
        modifier = Modifier.weight(weight = 1f, fill = false),
        text = name,
        overflow = TextOverflow.Ellipsis,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp,
        maxLines = 1
    )

Answer 2

You can add the weight modifier to the Text composable

Row(){
    Icon()
    Text(
        text = ".....",
        overflow = TextOverflow.Ellipsis,
        fontWeight = FontWeight.Bold,
        fontSize = 20.sp,
        maxLines = 1,
        modifier = Modifier.weight(1f)
    )
    //...
}

.