How to Change the size of a mat-icon in Angular Material?

The default size of a mat icon is 24px. Which basically means that the font-size, width and height properties are set to 24px.

So, if you want to change the size of a mat-icon, you should always change the value of the font-size, width and height and keep all three values the same to avoid any problem.

For example, if you want to change the size of all mat icons to 50px, you have to set the font-size: 50px;, width: 50px; and height: 50px;.

Add this code into your CSS file:

.mat-icon{
    font-size: 50px;
    width: 50px;
    height: 50px;
}

If you only want to change the size of a single mat icon, you can assign an Id, or class to it and then set its size.

Let’s say we have a home icon in our template file with a class 'home-icon':

<mat-icon class="home-icon">home</mat-icon>

Now, If we want to change its size to 50px, we can simply use the 'home-icon' class:

.home-icon{
    font-size: 50px;
    width: 50px;
    height: 50px;
}

Change mat-icon size using the transform Property

In this approach, we use CSS transform property to change the size of the mat icon.

The transform property accepts a function scale() which can be used to increase or decrease the size of any HTML element.

The scale() function takes in an absolute number as an argument. If this number is greater than 1, the size of the element increases else it decreases.

Let’s say we want to double the size of the mat icons using the scale() function. To do that we have to pass number 2 as its parameter:

/* Doubles the mat icon size */
.mat-icon{
    transform: scale(2);
}

Similarly, if you want to reduce the mat-icon size by half, you should pass 0.5 as a value to the scale() function:

/* Reduce size by 50%*/
.mat-icon{
    transform: scale(0.5);
}

Thanks for reading.


Author

  • Manoj Kumar

    Hi, My name is Manoj Kumar. I am a full-stack developer with a passion for creating robust and efficient web applications. I have hands-on experience with a diverse set of technologies, including but not limited to HTML, CSS, JavaScript, TypeScript, Angular, Node.js, Express, React, and MongoDB.