0

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. enter image description here

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?

Marijke
  • 153
  • 3
  • 14
  • The document has a section for icon in RTL mode, did you try following it?https://developers.google.com/fonts/docs/material_icons#icons_in_rtl – Jimmy Dec 20 '22 at 16:32
  • @Jimmy My problem is not with mirroring the icons because this is about icons that would look the same mirrored. My html has the "dir=rtl". The problem is that my logical properties, which normally follow the rules from html direction, don't follow those rules when I use mat-icon. Unfortunately, the document you sent, does not provide a solution for that. – Marijke Dec 21 '22 at 08:22

2 Answers2

0

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

Brian Nunez
  • 31
  • 4
  • Thanks for pointing this out, I changed the url to the correct one. – Marijke Dec 20 '22 at 14:55
  • You can find the classes you can use to over-ride their classes. I don't know why but I also had similar problems when I was first implementing Material Components. https://github.com/angular/material/tree/master/src/core/style – Brian Nunez Dec 21 '22 at 19:59
0

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.

Marijke
  • 153
  • 3
  • 14