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>