Change the size of mat-icon on Angular Material

This article will show how you can change the size of mat-icon on Angular Material.

Angular Material uses the ‘Material Icons’ Font-Family for its icons, and the default size of mat-icon is 24px. However, there might be cases where you want to modify the size of the icons.

Adjusting Font-Size

You can modify the size of the icon by changing its font-size in your CSS file. This approach is straightforward and easy to implement.

For Class

In CSS, a class is a way to apply styles to multiple HTML elements with a shared class name. When we say “For Class” in the context of the tutorial, it means applying a particular style rule to all HTML elements that have a specific class assigned to them.

Example

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

Here, the style rule is applied to all HTML elements with the class “mat-icon.” Any <mat-icon> element with the class “mat-icon” will have a font size of 50 pixels.

For Tag

When we say “For Tag,” it means applying a style rule directly to HTML elements of a specific type (tag). In the context of the tutorial, it refers to applying styles to all instances of a particular HTML tag.

Example

mat-icon {
  font-size: 50px;
}

Here, the style rule is applied to all <mat-icon> elements without the need for a class. It directly targets all instances of the <mat-icon> tag and sets their font size to 50 pixels.

This will globally set the font-size for all mat-icon elements.

Adjusting Height and Width

To properly size the icon and maintain its aspect ratio, adjust the height and width in addition to the font-size. You can apply these styles globally or selectively to certain icons.

Globally

When we talk about applying styles “Globally,” it means that the style rules are applied universally, affecting all instances of the targeted elements throughout the entire application or web page. It’s not limited to a specific context or container.

Example

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

Here, the styles are applied globally to all elements with the class “mat-icon,” setting their font size, height, and width.

Selectively

When we say “Selectively,” it means applying styles to specific instances or subsets of elements rather than applying them universally. In the context of the tutorial, it refers to targeting specific elements based on a class.

Example

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

Here, the styles are applied selectively to elements with the class “customIconSize.” Only HTML elements that have this specific class will be affected by these style rules.

Apply the class in your HTML template:

<button mat-icon-button>
    <mat-icon class="customIconSize">visibility</mat-icon>
</button>

Using Transform Property

For a different approach, you can use the transform property to scale the icon. This is useful when you want to dynamically adjust the size.

.icon-2x {
    transform: scale(2);
}

.icon-3x {
    transform: scale(3);
}

Apply the class to your HTML template:

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

Combining Approaches

For more flexibility, you can combine approaches to create a comprehensive solution. Give your class name a meaningful name related to its purpose.

.mat-icon-size {
  font-size: 50px;
  height: 50px;
  width: 50px;
  transform: scale(2);
}

Apply the class in your HTML template:

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

This combination allows for precise control over the size of the mat-icon based on your requirements.

By following these steps, you can easily customize the size of mat-icon in Angular Material to suit the design needs of your application.