Ionic 2 back button in RTL layout

Question

I'm going to start an Ionic 2 app, and it should be in Arabic language, so i need to use RTL layout, i chose the side menu template

configuring the app to RTL by the following line changed every thing's direction perfectly except the back button should point to the right direction

<ion-nav #content [root]="rootPage" dir="rtl"></ion-nav>

the navbar now looks like this

Isn't there any kind of fix until Ionic team gives attention to RTL related issues?

Answer 1

Instead of setting the dir attribute in the ion-nav, you can use the platform to set the alignment to RTL (docs)

private setProperAligment(): void {

    if (this.selectedLanguage.rtl) {
        this.platform.setDir('rtl', true);
        // ...
    } else {
        this.platform.setDir('ltr', true);
        // ...
    }
}

This will add the dir="rtl" attribute to the html tag of your app. Just like you said, Ionic team is working on fixing the issue with the back button, so in the meantime, you can add this css style rule in the app.scss file:

html[dir="rtl"] {
    .back-button-icon.icon-md.back-button-icon-md.ion-md-arrow-back {
        transform: rotate(180deg);
    }

    .back-button-icon.icon-ios.back-button-icon-ios.ion-ios-arrow-back {
        transform: rotate(180deg);
        padding: 0 5px;
    }
}