Angular2材质md-icon尺寸

Question

How do I get the icon size to work with the relative size of the font in angular2?

<div style="font-size: 3em;">
<md-icon>highlight</md-icon>
Title
</div>

Answer 1

In your CSS file you can modify the md-icon size by modifying font-size, height and width. For example:

md-icon.size-45 {
    font-size: 45px;
    height: 45px;
    width: 45px;
}

Answer 2

There are two ways to approach this.

You can influence the ligature itself:

<md-icon><h1>highlight</h1></md-icon>

This will resize the icon, but it will be influenced by styles set on the header elements (like font-weight ). So, I would recommend resizing using CSS:

<md-icon style="font-size:24px">highlight<md-icon>

This will resize the icon crisply. You can of course also add classes to do that (which is even better!):

<md-icon class="large">highlight<md-icon>