Angular 材质中 <md-icon> 的大小和颜色答案

【问题标题】：Size and color of <md-icon> in Angular MaterialAngular 材质中 <md-icon> 的大小和颜色
【发布时间】：2017-09-29 21:33:31
【问题描述】：

我使用 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>

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

【问题讨论】：

【解决方案1】：

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

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

或创建一个新类：

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

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

【讨论】：

【解决方案2】：

要更改 md-icon 大小，请将其添加到您的 CSS：

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

要更改 md 图标颜色，请将其添加到您的 CSS：

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

【讨论】：