How to change mat-icon size in Material

Question

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.

Answer 1

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.