How to change md-icon size in Material

Question

This question comes from the material2 github repo https://github.com/angular/material2/issues/4422#issuecomment-300309224

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

Answer 1

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

Answer 2

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.

Answer 3

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.

Answer 4

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

Answer 5

Try this.

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

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

Answer 6

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;