CODEWITHSUNDEEP
angularangular-materialicons
Nick Wills
Nick Wills

Reputation: 1138

How to control the orientation of the angular mat-icon

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

Upvotes: 10

Views: 15890

Answers (3)

Ayush
Ayush

Reputation: 528

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

Upvotes: 0

Nick Wills
Nick Wills

Reputation: 1138

Manage to achieve it by doing this

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

Upvotes: 23

Ghonima
Ghonima

Reputation: 3082

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.

Upvotes: 1

Related Questions