如何使用新的Material Design Icon主题：概述，圆形，双色和夏普？-Java 学习之路

谷歌已经用4个新的预设主题修改了Material Design Icons：

Outlined, Rounded, Two-Tone and Sharp ，除常规 Filled/Baseline 主题外：

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

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

然后使用所需的图标as suggested in the documentation：

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

但它始终显示“填充/基线”版本 .

我尝试使用 Outlined 主题来执行以下操作：

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

并将Web Fonts链接更改为：

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

等但它不起作用 .

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

tl;dr: Has anyone tried using the new themes? Does it even work like the baseline version (inline html tag)? Or, is it only meant to be downloaded as SVG or PNG formats?

提前致谢 .

5 回答

4
更新（14/11/2018）：使用“_outline”后缀的16个大纲图标列表 .

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

（见于material-design-icons github page . 搜索：“ _outline_24px.svg ”）
```
help_outline 
label_outline 
mail_outline 
info_outline 
lock_outline 
lightbulb_outline 
play_circle_outline 
error_outline 
add_circle_outline 
people_outline 
person_outline 
pause_circle_outline 
chat_bubble_outline 
remove_circle_outline 
check_box_outline_blank 
pie_chart_outlined
```
请注意，pie_chart需要为“pie_chart_ outlined ”而不是大纲 .

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

截至今天（2018年7月19日），自新图标主题推出以来已有两个多月， there is No Way 使用内联标签  包含这些图标 .

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

因此，在Google为此提出解决方案之前，我已经开始使用hack在我的 development environment 中包含这些新的图标主题，然后将相应的图标下载为SVG或PNG . 我以为我会和大家分享 .

IMPORTANT ：不要在生产环境环境中使用它，因为Google提供的每个CSS文件都超过1MB .

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

Outline:
```
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
```
Rounded:
```
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">
```
Two-Tone:
```
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">
```
Sharp:
```
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
```
这些文件中的每一个都包含作为背景图像（Base64图像数据）包括的相应主题的图标 . 以下是我们如何使用它来测试我们设计中特定图标的兼容性，然后再下载它以便在生产环境环境中使用 .

STEP 1 ：

包括要使用的主题的样式表 . 例如：对于'概述'主题，使用'outline.css'的样式表

STEP 2 ：

将以下类添加到 own 样式表：
```
.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);
}
```
STEP 3 ：

通过将以下 classes 添加到  标记来使用该图标：

1） material-icons-new 班

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

前缀：

概述： outline-

圆形： round-

双音： twotone-

夏普： sharp-

例如（对于'announcement'图标）：

outline-announcement ， round-announcement ， twotone-announcement ， sharp-announcement

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

Changing icon size:

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

Example:

Case I: 对于 account_circle 图标的 Outlined 主题：

1）包括样式表：
```
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
```
2）在页面上添加图标标签：
```

```
可选（适用于深色背景）：
```

```
Case II: 对于 assessment 图标的 Sharp 主题：

1）包括样式表：
```
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
```
2）在页面上添加图标标签：
```

```
（适用于深色背景）：
```

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

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

I will update this post if and when Google comes up with a solution for this issue that does not involve downloading an icon for usage.
回复于 2024-04-30T05:02:50+08:00
1
对我有用的是在图标名称后面使用_outline而不是_outline d .
```
<mat-icon>info</mat-icon>
```
VS
```
<mat-icon>info_outline</mat-icon>
```
回复于 2024-04-30T05:02:50+08:00
0

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

回复于 2024-04-30T05:02:50+08:00
7
我不满意，直到知道谷歌还没有发布他们的新设计作为字体或svg图标集 . 因此我整理了一个小的npm包来解决问题 .

https://www.npmjs.com/package/ts-material-icons-svg

只需导入您想要使用的图标并将其添加到您的注册表中 . 这也支持树摇动，因为只有那些图标被添加到您真正想要和/或需要的项目中 .
```
npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git
```
例如，使用两个音调图标
```
import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
 'edit',
 domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
 );
```
在您的html模板中，您现在可以使用新图标
```
<mat-icon svgIcon="edit"></mat-icon>
```
回复于 2024-04-30T05:02:50+08:00
15

我最终使用IcoMoon应用程序仅使用我最近的Web应用程序构建所需的新主题图标来创建自定义字体 . 不是完美，但您可以通过一些设置很好地模仿现有的Google字体功能 . 这是一篇文章：

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

如果有人感觉大胆，他们可以使用IcoMoon转换整个主题 . 地狱，IcoMoon可能有一个内部过程，因为他们已经在他们的库中设置了原始材料图标，因此很容易 .

无论如何，这不是一个完美的解决方案，但它对我有用 .

回复于 2024-04-30T05:02:50+08:00

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

5 回答

更新（14/11/2018）：使用“_outline”后缀的16个大纲图标列表 .

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

相关问题