You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
First of all, let me start of by saying, I'm not talking about glyph/icon mirroring.
When a page is using [dir=rtl] items should flow from right to left. Material Design Icons is forcing the orientation to be left to right, even on pages that should be right to left. This forces you to div wrap the icon for the layout to flow properly.
You can see the warning icon isn't properly respecting the page's RTL implementation.
I'm not sure why the direction: ltr since no browser actually mirrors the icons. This is even stated in the guide:
By default on the web, icons are not mirrored when the layout direction is mirrored. You need to specifically mirror the appropriate icons when needed.
Perhaps the usage of direction: ltr was misunderstood when the rule was added. If it is fully intentional, there should be a better explanation as to why it has to be used and how to workaround the layout direction issue.
The text was updated successfully, but these errors were encountered:
First of all, let me start of by saying, I'm not talking about glyph/icon mirroring.
When a page is using
[dir=rtl]
items should flow from right to left. Material Design Icons is forcing the orientation to be left to right, even on pages that should be right to left. This forces you to div wrap the icon for the layout to flow properly.The line in question, specifically, is this one:
material-design-icons/iconfont/material-icons.css
Line 24 in a6145e1
Here's the codepen explaining the issue:
https://codepen.io/shortfuse/pen/RMgrOw
You can see the
warning
icon isn't properly respecting the page's RTL implementation.I'm not sure why the
direction: ltr
since no browser actually mirrors the icons. This is even stated in the guide:Perhaps the usage of
direction: ltr
was misunderstood when the rule was added. If it is fully intentional, there should be a better explanation as to why it has to be used and how to workaround the layout direction issue.The text was updated successfully, but these errors were encountered: