how to put icon after the word skip

Question

I'm trying to put a icon after the word skip put it always appears in the top left corner.

Example: Skip>

Text(text = buildAnnotatedString {
        append("")
        val skipText = stringResource(id = R.string.skip)
        withStyle(style = SpanStyle(color = MaterialTheme.colors.onBackground)
        ) {
            append(skipText)
        }
        Icon(Icons.Filled.ChevronRight, "chevron right")
    },
    style = MaterialTheme.typography.body1,
    modifier = Modifier
    .align(Alignment.BottomCenter)
    .padding(bottom = 50.dp)
)

user_2016562 · Answer

You can use the inlineContent attribute to insert a Composable into text layout.

val inlineContent = mapOf(
    Pair(
        "icon",
        InlineTextContent(
            Placeholder(
                width = 12.sp,
                height = 12.sp,
                placeholderVerticalAlign = PlaceholderVerticalAlign.AboveBaseline
            )
        ) {
            Icon(Icons.Filled.CheckCircle,"",tint = Color.Red)
        }
    )
)

Text(
    text = buildAnnotatedString {
        append("")
        val skipText = "Skip text"
        withStyle(style = SpanStyle(color = MaterialTheme.colors.onBackground)){
            append(skipText)
        }
        appendInlineContent("icon", "[icon]")
    },
    style = MaterialTheme.typography.body1,
    modifier = Modifier
        .padding(bottom = 50.dp),
    inlineContent = inlineContent
)

how to put icon after the word skip

1 Answers