CSS 更改 AngularJS Material 图标的图标大小
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36562597/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Change the icon size of AngularJS Material icons
提问by sreginogemoh
I have referenced then declared an icon
我已经引用然后声明了一个图标
<i class="material-icons">face</i>
But how can I change the icon size?
但是如何更改图标大小？
On oficial site https://design.google.com/icons/I can see they using classes like class="md-icon dp48"but it is not working in my case.
在官方网站https://design.google.com/icons/我可以看到他们使用类似的类，class="md-icon dp48"但在我的情况下不起作用。
回答by claudios
By reading the material design in github I found these useful stuff that might help you.
通过阅读 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); }
From the code above, there you can simply change or override the material css icons.
从上面的代码中，您可以简单地更改或覆盖材质 css 图标。
Sample code:
示例代码：
<i class="material-icons md-18">face</i>
More details here
更多细节在这里
回答by user1670304
If I'm doing a one-off I usually just add a style= modification to the font-size in the tag. But yes long story short there's no real trick to it other than defining your own size styles to attach in css as a more permanent solution.
如果我是一次性的，我通常只在标签中的字体大小中添加一个 style= 修改。但是，长话短说，除了定义您自己的大小样式以附加在 css 中作为更永久的解决方案之外，没有其他真正的技巧。
<i class="material-icons" style="font-size: 50px">insert_invitation</i>
回答by kuncevic.dev
if you are using scss
如果你正在使用 scss
@mixin md-icon-size($size: 24px) {
font-size: $size;
height: $size;
width: $size;
}
.md-icon-16 {
@include md-icon-size(16px);
}
.md-icon-18 {
@include md-icon-size(18px);
}
.md-icon-24 {
@include md-icon-size(24px);
}
.md-icon-36 {
@include md-icon-size(36px);
}
回答by Patryk Ties
You can use normal css, but must override inline styling with:
您可以使用普通 css，但必须使用以下内容覆盖内联样式：
font-size: 50px !important;
font-size: 50px !important;
回答by M.A.Williams
The best way to change the size of a Materialize Icon is by adding a modifier to the iclass:
更改 Materialize Icon 大小的最佳方法是向i类添加修饰符：
<i class="material-icons small">menu</i>
<i class="material-icons medium">menu</i>
<i class="material-icons large">menu</i>
You can find more on changing the icon size on the Materialize site under icons.
您可以在 Materialise 站点上的图标下找到有关更改图标大小的更多信息。
回答by Marcin
I followed the answer delivered by Claudios and had to do an additional change. I am using MDL and for the icon to be centered in a button it was necessary to change position left property (default is left:50%).
我遵循了克劳迪奥斯提供的答案，不得不做一个额外的改变。我正在使用 MDL 并且要使图标居中在按钮中，有必要更改左位置属性（默认为左：50%）。
CSS:
CSS：
.material-icons.md-36 {
font-size: 36px;
position: absolute;
left: 40%;
}
And in HTML:
在 HTML 中：
<i class="material-icons md-36">face</i>
回答by Jagann
Sometimes setting font size will not reduce the icon size. Coz, the recommended font-size is either 18, 24, 36 or 48px.
有时设置字体大小不会减小图标大小。因为，推荐的字体大小是 18、24、36 或 48px。
Try setting "height" , "width", "line-height" attributes for that particular icon. This might help.
尝试为该特定图标设置 "height" 、 "width" 、 "line-height" 属性。这可能会有所帮助。
回答by prat_bhan
There is a size attribute associated with icon tag like check_circle
有一个与 icon 标签相关的 size 属性，如 check_circle
so using size attribute, we can change the size of the icons.
所以使用 size 属性，我们可以改变图标的大小。
回答by Ahmad Mayo
you can change the font-size property, it will reflect on the icon because it's a "FONT ICON"
您可以更改 font-size 属性，它会反映在图标上，因为它是“字体图标”
