Change the Icon Size of Angularjs Material Icons

Change the icon size of AngularJS Material icons

By reading the material design in github I found these useful stuff that might help you.

 /* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

From the code above, there you can simply change or override the material css icons.

Sample code:

<i class="material-icons md-18">face</i>

More details here

Angular2 Material md-icon size

In your CSS file you can modify the md-icon size by modifying font-size, height and width. For example:

md-icon.size-45 {
    font-size: 45px;
    height: 45px;
    width: 45px;
}

How to change size of mat-icon on Angular Material?

Since Angular Material uses 'Material Icons' Font-Family, the icon size depends on font-size.

Therefore, if you want to modify the size of the icon then you change its font-size in your CSS file.

For example,

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

How to set Angular Material default icon set

I think there is a more simpler way to use material icons and this is how I use them.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">face</i> 

/* Rules for sizing the icon. */.material-icons.md-18 { font-size: 18px; }.material-icons.md-24 { font-size: 24px; }.material-icons.md-36 { font-size: 36px; }.material-icons.md-48 { font-size: 48px; }
/* Rules for using icons as black on a light background. */.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }
/* Rules for using icons as white on a dark background. */.material-icons.md-light { color: rgba(255, 255, 255, 1); }.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"><i class="material-icons">face</i>
<i class="material-icons md-18">face</i><i class="material-icons md-24">face</i><i class="material-icons md-36">face</i><i class="material-icons md-dark">face</i><i class="material-icons md-dark md-inactive">face</i>

Adjust a Material Icon's Width

The size of the icon is controlled by your font-size of that icon.
If you want to move it to the right you can add negative margin.

.material-icons {
    margin-right: -10px;
}

How to set lg or 2x on icons in Angular Material (like we do in Font Awesome)?

To enlarge them, just create a class (maybe .md-icon-2x?) as follows and add it to mat-icon:

.md-icon-2x {
    width: 48px;
    height: 48px;
    font-size: 48px;
}

Since Material Icons is actually a ligature font, it can be easily changed with the font-size attribute to make the icon larger.

How do I change the color of an md-icon in Angular Material?

For the people trying to color their md-icon, I found out that I had the same problem using Angular 1.3.x and Angular Material 0.8.x.

I fixed the problem by editing my SVG files and deleting the "fill" attribute that was overriding any inherited color.

After deleting this "fill" attribute in each SVG file, I could properly choose the color I wanted to assign to the icon thanks to CSS as specified by Jason Aunkst.

---

Related Topics