How to change the size of mat-icon in Angular Material


There are 2 different ways to change the mat-icon size Angular Material.

Following are 2 different ways to change the mat-icon size Angular Material.

  1. Using font-size property to the mat-icon class
  2. Using css class to the mat-icon class

Change mat-icon size using font-size property

you can set the font-size property directly on the mat-icon element using the style attribute, like this:

<mat-icon style="font-size: 24px;">edit</mat-icon>

However, it’s generally better to use CSS classes to apply styles, as it keeps your HTML templates cleaner and makes it easier to make global changes to your styles.


Change mat-icon size using css class

First, add a CSS class to the mat-icon element in your HTML template:

<mat-icon class="my-icon">edit</mat-icon>
  1. Then, define the CSS class in your component’s CSS file or in your global styles file:
.my-icon {
  font-size: 24px;
}

In the above example, the font-size property is set to 24px, which will make the mat-icon element larger. You can adjust the size by changing the value of the font-size property to your desired font size.

I hope you like this amazing article.


Also Read :