Auto mirroring in jetpack compose Icons

Question

I'm using jetpack compose now, and my app has two locales which one of them is RTL, and the other one is LTR.
Everything works fine when the user changes the locale, the whole layout will be rearranged.

The only problem I have is the mirroring of Jetpack Compose Icons. I have an IconButton like this:

IconButton(onClick = { backView(true) }) {
    Icon(Icons.Filled.ArrowBack, contentDescription = "back")
}

Which is used to navigate back.
My problem is this Icon won't be mirrored when the user switches to RTL Locale.

Before Compose, I imported the arrow_back vector, and it has a checkbox for auto mirroring for RTL support.

How can I achieve the RTL support in Compose?

Answer 1

Use scale to mirror the icon:

IconButton(onClick = { backView(true) }) {
    Icon(modifier = Modifier.scale(scaleX = -1f, scaleY = 1f), 
    imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
}

If you want to do this throughout your app, you could just create a Modifier extension function. Here we'll call it mirror:

@Stable
fun Modifier.mirror(): Modifier {
    return if (Locale.getDefault().layoutDirection == LayoutDirection.RTL)
        this.scale(scaleX = -1f, scaleY = 1f)
    else
        this
}

And then apply it:

IconButton(onClick = { backView(true) }) {
    Icon(modifier = Modifier.mirror(), 
    imageVector = Icons.Filled.ArrowBack, contentDescription = "back")
}

See Scale