How To Change Size Of Mat Icon On Angular Material Duplicate

When you're working with Angular Material in your project, you might come across a situation where you need to change the size of a MatIcon and duplicate it. This can be a handy trick to add a personalized touch to your application's design. In this guide, we'll walk you through the steps on how to achieve this easily.

To begin, we need to make sure you have Angular Material set up in your project. If you haven't already done this, you can add Angular Material by running the following command:

ng add @angular/material

Once Angular Material is set up, find the MatIcon you want to duplicate in your component's HTML file. You can adjust the size of the icon by using the `font-size` CSS property. Here's an example of how you can change the size of a MatIcon:

<i class="material-icons custom-icon">favorite</i>

In your component's CSS file, define the `.custom-icon` class and set the `font-size` property to your desired size:

.custom-icon {
  font-size: 24px; /* Adjust the size as needed */
}

By changing the `font-size` value in the CSS class, you can easily adjust the size of the MatIcon to suit your design requirements.

To duplicate the MatIcon, you can simply copy the HTML element and paste it where you want the duplicate icon to appear. Make sure to apply the same styling class to the duplicated icon to maintain consistency in size.

<i class="material-icons custom-icon">favorite</i>
<i class="material-icons custom-icon">favorite</i>

This will display two identical MatIcons with the specified size on your page. You can duplicate the icons as many times as needed by copying and pasting the HTML element.

If you want to have different sizes for the duplicated icons, you can create additional CSS classes with different `font-size` values and apply them to the respective MatIcons:

<i class="material-icons custom-icon">favorite</i>
<i class="material-icons custom-icon custom-icon-large">favorite</i>

In your CSS file, define the new class and set the `font-size` property accordingly:

.custom-icon-large {
  font-size: 32px; /* Adjust the size of the large icon */
}

This way, you can customize the size of each duplicated MatIcon individually.

In conclusion, changing the size of MatIcons and duplicating them in Angular Material is a simple process that allows you to enhance the visual appeal of your application. By following these steps and utilizing CSS styling, you can easily customize the size of MatIcons and create duplicates to meet your design needs.