更改 AngularJS Material 图标的图标大小

Question

我已经引用然后声明了一个图标

<i class="material-icons">face</i>

但是如何更改图标大小？

在官方网站 https://design.google.com/icons/ 上，我可以看到他们使用 class="md-icon dp48" 之类的类，但在我的情况下它不起作用。

原文由 sreginogemoh 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

通过阅读 github 中的材料设计，我发现这些有用的东西可能会对您有所帮助。

  /* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

从上面的代码中，您可以简单地更改或覆盖材质 css 图标。

示例代码：

 <i class="material-icons md-18">face</i>

更多细节 在这里

原文由 claudios 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

如果我做的是一次性的，我通常只是在标签中添加一个 style= 修改到 font-size 。但是，长话短说，除了定义您自己的尺寸样式以附加在 css 中作为更永久的解决方案之外，没有什么真正的技巧。

 <i class="material-icons" style="font-size: 50px">insert_invitation</i>

原文由 user1670304 发布，翻译遵循 CC BY-SA 3.0 许可协议