Angular2 File Size md-icon

Question

How can I adjust icon size with relative font size in angular2?

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

Answer 1

In your CSS file, you can resize the md icon by changing the font size, height and width. For instance:

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:

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

This will resize the icon, but it will be affected by the styles set on the title elements (for example, font-weight). So, I would recommend resizing with CSS:

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

This will dramatically resize the icon. You can, of course, also add classes for this (which is even better!):

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