web: icons do not follow page ltr/rtl direction

[clshortfuse]

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:

https://github.com/google/material-design-icons/blob/a6145e167b4a3a65640dd6279319cbc77a7e4e96/iconfont/material-icons.css#L24

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:

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.

[tphinney]

Seems like a bug/error, yes.

[clshortfuse]

Still happening on Material Symbols as well.

[GPGPgauravpunetha12]

@tphinney pls assign me this issue

[tomasdev]

https://developer.mozilla.org/en-US/docs/Web/CSS/direction#values given LTR is the default value, I'd suggest removing it altogether and letting implementors define it.