如何控制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

Answer 1

Manage to achieve it by doing this

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

Answer 2

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.

Answer 3

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

1. https://angular.io/api/common/NgStyle
2. Angular - How to apply [ngStyle] conditions