Centering Resized Material Design Icons

Photo by Thought Catalog on Unsplash

Scenario

We’ve changed the visible size of our Material Design icon to 60px like this:

<mat-icon style="font-size: 60px;">account_circle</mat-icon>

Now we want it centered within the containing element.

Approach

By default the material icon has it’s width and height parameters set to 24px . These must all be changed to match the font-size setting.

<mat-icon style="
    font-size: 60px;
    width: 60px;
    height: 60px;">
account_circle
</mat-icon>

Demo