How to change mat-icon size in Material

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);
    }
  }
}

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.