Angular Material中<md-icon>的大小和颜色

Question

我使用Angular Material 2.0.0-beta.3在我的应用中成功显示了一个图标account_circle图标，如下所示：

<md-icon>account_circle</md-icon>

我在我的应用中添加了<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">。

但是，使用md类增加图标大小的推荐方法似乎都不起作用。如何在不使用字体大小的情况下更改大小？如何将颜色更改为与输入框占位符相同的颜色？

更新

好的，我通过将字体大小直接应用于图标本身来改变图标大小，如下所示：

<div fxFlexAlign="center"><md-icon style="font-size:48px;">account_circle</md-icon></div>

然而，现在我遇到的问题是图标没有完全居中 - 它看起来像是使用图像的单个象限来计算居中，所以不太正确。将像这样放大的材质图标居中的最佳方法是什么？

Answer 1

您必须设置md-icon的大小，而不仅仅是字体大小：

<md-icon style="font-size:48px; width: 48px; height:48px;">

或创建一个新类：

<md-icon class="md-48">

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

Answer 2

要更改md图标大小，请将其添加到CSS：

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

要更改md-icon颜色，请将其添加到CSS：

md-icon {
  color: #FFF !important;
}