angularangular-material

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

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