首页 文章

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

提问于
浏览 次
1

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

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

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

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

Update

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

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

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

angular material-design angular-material

2 回答

  • 1

    你必须设置md-icon的大小，而不仅仅是font-size：

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

    或创建一个新类：

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

.md-48 {
  font-size:48px; 
  width: 48px;
  height:48px;
}
    回复于
  • 0

    To change the md-icon size, add this to your CSS:

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

    To change the md-icon color, add this to your CSS:

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

相关问题