如何使用新的Material Design Icon主题:概述,圆形,双色和夏普？

Question

如何使用新的Material Design Icon主题:概述,圆形,双色和夏普？

Aj3*_*334 113 icons material-design google-material-icons

谷歌已经用4个新的预设主题改进了其Material Design Icons:

除了常规的填充/基线主题外,还有轮廓,圆角,双色和夏普:

但是,不幸的是,它并没有说任何地方如何使用新的主题.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Run Code Online (Sandbox Code Playgroud)

然后使用文档中建议的所需图标:

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

Run Code Online (Sandbox Code Playgroud)

但它总是显示'填充/基线'版本.

我尝试过以下操作来使用Outlined主题:

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

Run Code Online (Sandbox Code Playgroud)

并将Web Fonts链接更改为:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">

Run Code Online (Sandbox Code Playgroud)

等但它不起作用.

在那样的黑暗中拍摄是没有意义的.

tl;博士:有没有人尝试过使用新主题？它甚至像基线版本(内联html标签)一样工作吗？或者,它是否只是以SVG或PNG格式下载？

提前致谢.

Answer 1

Aj3*_*334 107

更新(14/11/2018):使用"_outline"后缀的16个大纲图标列表.

这是使用_outline后缀(经过测试和确认)的常规Material-icons Webfont的16个大纲图标的最新列表.

(如在material-design-icons github页面上找到的.搜索:" _ outline_24px.svg ")

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Run Code Online (Sandbox Code Playgroud)

需要注意的是pie_chart需要" pie_chart_ 概述 ",而不是概括.

这是使用内联标记测试新图标主题的黑客攻击.这不是官方解决方案.

截至今天(2018年7月19日),自新图标主题推出以来已有两个多月,没有办法使用内联标签包含这些图标<i class="material-icons"></i>.

+ Martin指出在Github上提出了同样的问题:https://github.com/google/material-design-icons/issues/773

因此,在Google为此提出解决方案之前,我已经开始使用黑客在我的开发环境中包含这些新的图标主题,然后再将相应的图标下载为SVG或PNG.而且我想我会和大家分享.

重要提示:请勿在生产环境中使用此功能,因为Google提供的每个CSS文件都超过1MB.

Google使用这些样式表在其演示页面上展示图标:

大纲:

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

Run Code Online (Sandbox Code Playgroud)

圆润:

<i class="material-icons">help_outline</i> 
<i class="material-icons">label_outline</i> 
<i class="material-icons">mail_outline</i> 
<i class="material-icons">info_outline</i> 
<i class="material-icons">lock_outline</i> 
<i class="material-icons">lightbulb_outline</i> 
<i class="material-icons">play_circle_outline</i> 
<i class="material-icons">error_outline</i> 
<i class="material-icons">add_circle_outline</i> 
<i class="material-icons">people_outline</i> 
<i class="material-icons">person_outline</i> 
<i class="material-icons">pause_circle_outline</i> 
<i class="material-icons">chat_bubble_outline</i> 
<i class="material-icons">remove_circle_outline</i> 
<i class="material-icons">check_box_outline_blank</i> 
<i class="material-icons">pie_chart_outlined</i>

Run Code Online (Sandbox Code Playgroud)

双色:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Run Code Online (Sandbox Code Playgroud)

尖锐:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Run Code Online (Sandbox Code Playgroud)

这些文件中的每一个都包含作为背景图像(Base64图像数据)包括的相应主题的图标.以下是我们如何使用它来测试我们设计中特定图标的兼容性,然后再下载它以便在生产环境中使用.

第1步:

包括要使用的主题的样式表.例如:对于"概述"主题,请使用'outline.css'的样式表

第2步:

将以下类添加到您自己的样式表中:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Run Code Online (Sandbox Code Playgroud)

第3步:

通过将以下类添加到<i>标记来使用该图标:

1)material-icons-new上课

2)图标名称,如材料图标演示页面上所示,前缀为主题名称,后跟连字符.

前缀:

概述: outline-

圆润: round-

双色: twotone-

尖锐: sharp-

例如(对于'公告'图标):

outline-announcement,round-announcement,twotone-announcement,sharp-announcement

3)使用可选的第3类icon-white将颜色从黑色反转为白色(适用于深色背景)

更改图标大小:

由于这是背景图像而不是字体图标,因此请使用CSS 的height和width属性来修改图标的大小.类中的默认值设置为24px material-icons-new.

例:

案例I:对于account_circle图标的概述主题:

1)包括样式表:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

Run Code Online (Sandbox Code Playgroud)

2)在页面上添加图标标签:

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

Run Code Online (Sandbox Code Playgroud)

可选(适用于深色背景):

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Run Code Online (Sandbox Code Playgroud)

案例二:评估图标的夏普主题:

1)包括样式表:

<i class="material-icons-new outline-account_circle"></i>

Run Code Online (Sandbox Code Playgroud)

2)在页面上添加图标标签:

<i class="material-icons-new outline-account_circle icon-white"></i>

Run Code Online (Sandbox Code Playgroud)

(适用于深色背景):

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

Run Code Online (Sandbox Code Playgroud)

我不能强调,这不是在生产环境中包含图标的正确方法.但是,如果您必须扫描开发中页面上的多个图标,它确实使图标包含非常简单并节省了大量时间.

在站点速度优化方面,将图标下载为SVG或PNG确定是更好的选择,但是在原型设计阶段和检查特定图标是否符合您的设计等时,字体图标可以节省时间.

如果Google针对此问题提出解决方案而不涉及下载使用图标,我会更新此帖子.

我相信它又不同了，你最新的答案编辑是无关紧要的。以 [warning](https://fonts.google.com/icons?icon.query=warning&icon.style=Outlined) 为例，“material-icons-outlined”类不起作用。您需要添加新的导入，然后使用新的类 ```html <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz ,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" /> ``` 然后为 ```html <mat- 启用类 `material-symbols-outlined` icon class="material-symbols-outlined">警告</mat-icon> ``` (2认同)

Answer 2

Edr*_*ric 23

截至2019年2月27日，新的Material Icon主题有CSS字体。

但是，您必须创建CSS类才能使用字体。

字体系列如下：

Material Icons Outlined -概述图标
Material Icons Two Tone -两音图标
Material Icons Round -圆形的图标
Material Icons Sharp -锋利的图标

有关示例，请参见下面的代码示例：

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

或在Codepen上查看

编辑：截至2019年3月10日，似乎现在有新字体图标的类：

body {
  font-family: Roboto, sans-serif;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

编辑＃2：这是通过使用CSS图像过滤器（此注释改编的代码）为两色调图标着色的解决方法：

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}

Run Code Online (Sandbox Code Playgroud)

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>

Run Code Online (Sandbox Code Playgroud)

或在Codepen上查看

看来，`color` CSS属性当前不影响新的Material Icon主题的颜色。 (3认同)

Answer 3

Van*_*dze 19

自 12/05/2020 起，您需要

1.包含CSS：

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Run Code Online (Sandbox Code Playgroud)

2. 像这样使用它：

<i class="material-icons">account_balance</i>
<i class="material-icons material-icons-outlined">account_balance</i>
<i class="material-icons material-icons-two-tone">account_balance</i>
<i class="material-icons material-icons-sharp">account_balance</i>
<i class="material-icons material-icons-round">account_balance</i>

Run Code Online (Sandbox Code Playgroud)

注意：例如，要使用轮廓样式，您需要指定material-icons 和 material-icons-outlined类。

Answer 4

小智 10

对我有用的是在图标名称后面使用_outline而不是_outline d.

<mat-icon>info</mat-icon>

Run Code Online (Sandbox Code Playgroud)

VS

<mat-icon>info_outline</mat-icon>

Run Code Online (Sandbox Code Playgroud)

有一些图标是轮廓并具有后缀_outline.它只适用于那些人 (5认同)

Answer 5

小智 8

如果您已经在Web项目中使用了材料图标，则只需更新html文件中的引用以及所使用的图标类：

html参考：

之前

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Run Code Online (Sandbox Code Playgroud)

后

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

Run Code Online (Sandbox Code Playgroud)

材质图标类：

之后，只需检查wich className是否在使用：

之前：

<i className="material-icons">weekend</i>

Run Code Online (Sandbox Code Playgroud)

后：

<i className="material-icons-outlined">weekend</i>

Run Code Online (Sandbox Code Playgroud)

对我有用...普拉维达！

Answer 6

Ron*_*Ron 7

对于角形材质，应使用fontSet输入更改字体系列：

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...

Run Code Online (Sandbox Code Playgroud)

这是正确的答案，只是在以后的“Angular v10”中确认了它。 (7认同)
顺便问一下，“fontSet”的可能值是什么？ (2认同)

Answer 7

小智 5

新主题可能不是(还是？)Material Icons字体的一部分. https://github.com/google/material-design-icons/issues/773

Answer 8

小智 5

webfonts 链接现在可以在所有浏览器中使用！

只需将您的主题添加到由管道 ( |)分隔的字体链接中，就像这样

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

Run Code Online (Sandbox Code Playgroud)

然后引用该类，如下所示：

// class="material-icons" or class="material-icons-outlined"

<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>

Run Code Online (Sandbox Code Playgroud)

此模式也适用于 Angular Material：

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

Run Code Online (Sandbox Code Playgroud)

Answer 9

Bin*_*rus 5

到目前为止，没有一个答案解释了如何下载该字体的各种变体，以便您可以从自己的网站（WWW 服务器）提供它们。

虽然从技术角度来看这似乎是一个小问题，但从法律角度来看这是一个大问题，至少如果您打算向任何欧盟公民展示您的网页（或者甚至，如果您不小心这样做）。对于居住在美国（或欧盟以外的任何国家）的公司来说，情况更是如此。

如果有人对此感兴趣，我将更新此答案并在此处提供更多详细信息，但目前，我不想浪费太多题外空间。

说了这么多：

我已经按照两个非常简单的步骤下载了该字体的所有版本（常规、轮廓、圆角、锐利、双色调）（这是@Aj334 对他自己问题的回答，这让我走上了正确的轨道）（例如：“概述" 变体）：

通过直接让浏览器获取 CSS URL 来从 Google CDN获取 CSS，即将以下 URL 复制到浏览器的位置栏中：

https://fonts.googleapis.com/css?family=Material+Icons+Outlined

Run Code Online (Sandbox Code Playgroud)

这将返回一个看起来像这样的页面（至少在撰写本文时在 Firefox 70.0.1 中）：

/* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

Run Code Online (Sandbox Code Playgroud)

找到src:上面代码中以开头的那一行，让浏览器获取该行中包含的 URL，即将以下 URL 复制到浏览器的地址栏中：
```
https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
```
Run Code Online (Sandbox Code Playgroud)
现在浏览器将下载该.woff2文件并提供将其保存在本地（至少 Firefox 做到了）。

最后说两句：

当然，您可以使用相同的方法下载该字体的其他变体。在第一步中，只需将OutlinedURL 中的字符序列替换为字符序列Round（是的，确实如此，尽管此处在左侧导航菜单中称为“四舍五入”）Sharp或Two+Tone。结果页面每次看起来都几乎相同，但src:当然，每个变体的行中的 URL是不同的。

最后，在第 1 步中，您甚至可以使用该 URL：

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

Run Code Online (Sandbox Code Playgroud)

这将返回一个页面中所有变体的 CSS，然后包含五行src:，每行都有另一个 URL，指定相应字体的位置。

归档时间：	7 年，6 月前
查看次数：	58250 次
最近记录：	6 年前