How to change mat-icon size in Material

This question comes from the Material2 Github repo.

I still have problems to style a Material component that is wrapped in a custom component.

I have a <logo> component that contains <md-icon svgIcon="logo"></md-icon>

Adding:

:host { 
   .mat-icon {
    width: 100px;
    height: 100px;
    font-size: 56px;
  }
}

Will not apply to the Material component inside my custom component.

Solution 1:

In my case, this works perfectly. I use newest material (6.2.0)

CSS:

.icon {
    font-size: 36px;
}

HTML:

  <div class="icon">
    <mat-icon [inline]="true">done</mat-icon>
  </div>

The main thing is to set: [inline]="true"

From the API:

@Input() inline: boolean - Whether the icon should be inlined, automatically sizing the icon to match the font size of the element the icon is contained in.

Solution 2:

UPDATE: 2019-05-22

Newer versions of Material Design has the option to set [inline]="true" as a property on the HTML element.

I would recommend using that approach instead.

<mat-icon svgIcon="thumbs-up" inline="true"></mat-icon>

When using this, the icon will inherit from the parent container!

GLHF! :)

I have been getting some questions about this so I just wanted to make a clearer example of how to use it...

/* 1. Add this mixin to a "global" scss */

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
  line-height: $size;
}

/* 2. Then use it like this in you component scss */

mat-icon {
  @include md-icon-size(32px);
}

example usage

<mat-icon class="myIcon" svgIcon="search"></mat-icon>

:host {
  .myIcon {
    &mat-icon {
      @include md-icon-size(32px);
    }
  }
}

Solution 3:

I'm using

<mat-icon svgIcon="cellphone-link"></mat-icon>

with

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

for resizing the svg element. It was the only working solution for me, where 2 is 200% of the actual size (downsizing to e.g. 0.5 would be possible also).

Setting "height" and "width" was no option for me, because the rendered svg element of the mat-icon component has no viewBox attribute at the moment. But the viewBox attribute is mandatory to make it work with "height" and "width" styling. Maybe the Angular Material team will improve that in future.

As a side note: You can center the mat-icon with a parent wrapper and

display: flex;
align-items: center;
justify-content: center;