How to control the orientation of the angular mat-icon

Question

Angular version: v9

I have a button whose mat-icon is an arrow pointing towards the left. I would like to know if there is any attribute for the mat-icon element tag to allow me to control the orientation of the arrow so that it points upward instead.

For the sake of learning purpose, instead of looking for another icon which achieves what I want, I prefer to learn how to do it via attribute in angular.

I search online, but could not find a solution. Hence this question. Help appreciated. Thanks

score 17 · Accepted Answer · answered Feb 14 '20 at 15:08

17

Manage to achieve it by doing this

<mat-icon style="transform: rotate(90deg)">unfold_more</mat-icon>

answered Feb 14 '20 at 15:08

Nick Wills

800
2
10
26

score 1 · Answer 2 · answered Feb 12 '20 at 11:29

1

I believe you can not achieve this using mat-icon as they are two different icons. In case you want to achieve this, you would create the icon yourself using css and maybe add a class that points it upward if it meets a certain flag.

answered Feb 12 '20 at 11:29

Ghonima

2,978
2
14
23

score 0 · Answer 3 · answered Jan 23 '23 at 00:02

Adding onto @Nick Wills answer, if one wants to further add style conditionally they can do so with the help of ngStyle as follows:

<mat-icon [style.transform]="condition ? '':'rotate(180deg)'">chevron_right</mat-icon>

More info at

How to control the orientation of the angular mat-icon

3 Answers3