fix(rtl): flip arrow icons on rtl

[AmitMY]

Short description of what this resolves:

bad arrow direction on rtl

Changes proposed in this pull request:

• flip arrow icons on rtl

Only arrows?

I understand that more icons should be flipped, for example, exit, which is also an arrow, but that should be somehow in the icon's metadata.
I went all out in this edit and flipped all icons that can be flipped without causing harm, so this is just a toned down version

Ionic Version: 3.x

[brandyscarney]

@AmitMY What if we had an attribute that only flips the icon for rtl if it is added. Something like this:

[dir="rtl"] [flip-rtl] {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

Then if you want the icon to be flipped you would add it like:

<ion-icon name="arrow-forward" flip-rtl></ion-icon>

This would make it completely up to the user to flip the icon or not, could be used on icons outside of ionicons, and gets rid of any hardcoded styles for ionicons in case icons are added or removed. Then we would need to add some styling for our icons that are used in components. What do you think of this solution? Would it be viable?

[AmitMY]

@brandyscarney While I think that should be an option (the [flip-rtl] toggles flipping), I also think that some icons, and at least the arrow ones should be auto flipped.

It is a hassle, so most users wont use it.

The arrows mostly use forward and back, and that agrees with the style of start and end. No implicit left and right, so it needs to be flipped on rtl...

Look for the word "arrow" here:
https://ionicframework.com/docs/ionicons/

[AmitMY]

@brandyscarney Well, I added the flip-rtl, and a unflip-rtl, to be extra safe if someone wants to unflip the arrows, but I don't see anyone using the unflip-rtl attribute, as the arrows flipping is basically wanted on most if not all apps

[manucorporat]

scss already does it for transform, scale-x is not needed

[AmitMY]

@manucorporat can you please explain a bit more? If I only do transform: scaleX(-1); it does not cover browsers support, so I am not sure what you mean.

[AmitMY]

@manucorporat I looked in some code, and it seems you never do custom browser support for transform, so I guess I'll do the same. Updated

[AmitMY]

@manucorporat Anything else to fix here?

[AmitMY]

@brandyscarney Can you re-review?