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.

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.

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

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;

Edit: Please see the accepted answer!

Using it like this works just fine.

<md-icon svgIcon="arrow-down" class="size-16"></md-icon>

when having defined this in theme css (not in component :host)

md-icon.size-16 {
  width: 16px;
  height: 16px;
  line-height: 16px;
}

To make sure the icon remains centered within its in-build container (within <mat-icon> component) after it is resized, use this solution. Does not need a wrapper box nor the inline=true property.

HTML

<mat-icon class="big">error_outline</mat-icon>

CSS

.big {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}

Note: You can also use other units, like px or em

Try this.

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

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

I think the problem is caused by inlining the svg without viewBox - preventing all resizing attempts.

Seems to me the alternative is using the iconfont directly:

<i class="material-icons" style="font-size: 40px">face</i>

Worked for me

HTML

  <button mat-fab>
    <mat-icon class="md-36" inline aria-label="Home button">
      home
    </mat-icon>
  </button>
  <button mat-fab>
    <mat-icon class="md-48" inline aria-label="Up button">
      expand_less
    </mat-icon>
  </button>

CSS

.material-icons.md-18 {
  margin-top: -3px;
  font-size: 18px;
}
.material-icons.md-24 {
  margin-top: -3px;
  font-size: 24px;
}
.material-icons.md-36 {
  margin-top: -3px;
  font-size: 36px;
}
.material-icons.md-48 {
  margin-top: -4px;
  font-size: 48px;
}

The icons are properly centered and the wrapper div doesn't overflow the fab/button Not too elegant I guess

One other possible option, if you want to have the option to scale images to any font size up to a maximum (e.g. 300px), the following scss loop would work;

@for $i from 1 through 300{
  .iconsize-#{$i}{
    font-size: $i+unquote('px') !important;
    height: $i+unquote('px') !important;
    width: $i+unquote('px') !important;
  };
}

If you want to set a minimum size to generate in the compiled CSS, simply change 1 above to the minimum size you'd like and likewise, to change the maximum value, change 300 to whatever maximum value you'd like.

This is particularly handy for the icons as being SVG, they will scale to the size you set (though I've had some trouble getting third-party SVG icons scaling to fit the container, but that's a different issue). If you're like me, you often need to have the majority of icons at a specific size (e.g. menu icons) with some icons being larger (e.g. decorative elements). This loop allows you to easily test different sizes of font up to any size at 1px increments until you find a size that works for you.

What does this do?

When your SCSS is compiled to CSS, it will output a loop with the relevant classes from 1 to 300.

How do I use it?

To use, simply add the .iconsize-[x] class to your mat-icon;

<mat-icon class="iconsize-45">show_chart</mat-icon>

This example will set the icon to be 45px width and height.

Simplest way to do it (with no extra CSS), the following works fine

    <sup><mat-icon inline="true">info</mat-icon></sup>

info info

Please note the inline="true" which makes it inherit styling of parent tag