Angular2材质md-icon尺寸

Question

如何使图标大小与angular2中字体的相对大小一起使用？

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

Answer 1

在CSS文件中，您可以通过修改字体大小，高度和宽度来修改md-icon大小。 例如：

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

Answer 2

有两种方法可以解决这个问题。

你可以影响结扎本身：

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

这将调整图标的大小，但它会受标题元素上设置的样式（如font-weight ）的影响。 所以， 我建议使用CSS调整大小：

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

这将清晰地调整图标的大小。 你当然也可以添加类来做到这一点（这更好！）：

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