support for RTL icons

[mohalobaidi]

please support RTL by flipping certain icons horizontally. because there are icons that I shouldn't flip like "format_align_left" for example.

[RoelN]

Please see http://google.github.io/material-design-icons/#which-icons-should-be-mirrored-for-rtl- Closing this issue because I believe it has been addressed. If not, feel free to reopen this issue or create a new one with more information.

[Hawmex]

@RoelN I think the best way to implement bidirectionality in the future is by using CSS :dir() pseudo-class. So then, how should we mirror those icons listed in the provided link, in a CSS way? One way could be providing a font containing only the mirrored version of the icons listed in the link above. Which would be:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/* Material Icons src */) format('woff2');
}

@font-face {
  font-family: 'Mirrored Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(/* RTL Material Icons src */) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  /* the rest of styles */
}

.material-icons:dir(rtl) {
  font-family: 'Mirrored Material Icons', 'Material Icons'; /* fallback to unmirrored icons. */
}

[RoelN]

I think the docs leave it up to you how your technical implementation will look. I'd personally go for a transform: rotateY( 0.5turn); on all .material-icons:dir(rtl) elements, based on your idea. Assuming they contain a single icon. This prevents the need to load a second font with mirrored icons.

[Hawmex]

@RoelN But according to Material Guidelines#mirroring-elements, not all icons should be mirrored. Icons like undo and redo mean the same in both RTL and LTR. That's why I proposed a font just containing the ones that need to be mirrored.

[RoelN]

@Hawmex Gotcha. My solution wouldn't work indeed. I'll reopen the issue, thanks!

[Hawmex]

I don't really know how variable fonts work, but another approach could be providing a variable font with an axis like RTLD (standing for right-to-left direction) which avoids importing two fonts. It then could be:

.material-icons:dir(rtl) {
  font-variation-settings: "RTLD" 1;
}