Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.6k views
in Technique[技术] by (71.8m points)

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

See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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.


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...