css-更改AngularJS材质图标的图标大小

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

face

但是，如何更改图标大小？

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

9个解决方案

72 votes

通过阅读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图标。

样例代码：

face

在这里更多细节

claudios answered 2020-08-09T01:47:48Z

25 votes

如果我要一次性完成，通常只需在代码中为字体大小添加一个style =修改即可。 但是长话短说，除了定义自己的尺寸样式以作为永久性解决方案附加到CSS中之外，没有其他真正的窍门。

insert_invitation

user1670304 answered 2020-08-09T01:48:08Z

5 votes

如果您使用的是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);

}

Kuncevič answered 2020-08-09T01:48:28Z

3 votes

您可以使用普通的CSS，但是必须使用以下命令覆盖内联样式：

font-size: 50px !important;

Patryk Ties answered 2020-08-09T01:48:48Z

2 votes

更改“物化”图标大小的最佳方法是在i类中添加修饰符：

menu

menu

menu

您可以在Materialize网站上的图标下方找到有关更改图标大小的更多信息。

M.A.Williams answered 2020-08-09T01:49:12Z

0 votes

您可以更改font-size属性，因为它是“ FONT ICON”，它将显示在图标上

Ahmad Mayo answered 2020-08-09T01:49:32Z

0 votes

有时设置字体大小不会减小图标的大小。 Coz，建议的字体大小为18、24、36或48px。

尝试为该特定图标设置“高度”，“宽度”，“线高”属性。 这可能会有所帮助。

Jagann answered 2020-08-09T01:49:57Z

0 votes

有一个与icon标签相关的size属性，例如check_circle

因此，使用size属性，我们可以更改图标的大小。

prat_bhan answered 2020-08-09T01:50:21Z

0 votes

我听了克劳迪奥斯(Claudios)的回答，不得不做另外的改变。我正在使用MDL，并且要使图标位于按钮中央，必须更改position left属性(默认为left：50％)。

CSS：

.material-icons.md-36 {

font-size: 36px;

position: absolute;

left: 40%;

}

在HTML中：

face

Marcin answered 2020-08-09T01:50:50Z