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.
- Using
font-size
property to themat-icon
class - 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>
- 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 :