Mat-icon keeps rules for ltr direction even when page is rtl

Question

I'm working with an Angular v11 application which uses Material for mark-up. I'm implementing changes to make my webpage right-to-left language proof. One of the things that helps me with that is replacing all my margin-lefts to margin-inline-start etc. (so implementing the logical properties of css). This all works fine, but not when I want to implement it on a mat-icon.

Mat-icon is always styled as if it would be direction ltr. I noticed this is because class .material-icons that originates from "https://fonts.googleapis.com/icon?family=Material+Icons" always has "direction: ltr". But I don't know why, and I don't know how to change that.

When I put "direction: rtl" in my custom class, it works as expected, but putting direction in css is considered not done and it would make it very cumbersome to implement this.

I have a plunker here that shows the problem perfectly.

I don't seem to find anyone on stack overflow with the same issue, which strikes me as odd, I can't be the first encountering this problem?

I could solve it by setting the padding or margin on the parent of the mat-icon, but I have a button with two icons, so this is rather difficult.

So how can I make sure mat-icons follow the same direction as the parent (be it the direct parent or body or html tag) without having to put direction in css?

Answer 1

your link is just a link to stackoverflow.com. I can also help you, but I want to make sure by looking at the example

Answer 2

I found a solution. I feel like this should not be something I should do because the mat-icon should follow the direction of the html and not set its own direction (certainly when the icon is not one that looks different when mirrored).

In the general scss file I put this code:

html[dir=rtl] .material-icons {
  direction: rtl;
}

This makes sure the logical operators work for mat-icons, so I can apply padding and margin to the correct sides of the icon without having to add a span around the icon.