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