如何使用新的材料设计图标主题:轮廓，圆形，双色和尖锐?

谷歌用4个新的预设主题修改了它的材质设计图标:

轮廓，圆润，双色和尖锐，除了常规的填充/基线主题:

但是，不幸的是，它没有说明如何使用新的主题。

我已经通过包含链接使用它通过谷歌Web字体:

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

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

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

但它总是显示“填充/基线”版本。

我尝试了以下方法来使用概述了主题:

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

并且，更改Web字体链接为:

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

等。但这并不奏效。

这样瞎猜是没有意义的。

有人尝试过使用新的主题吗?它甚至像基线版本(内联html标签)一样工作吗?或者，它只能以SVG或PNG格式下载吗?

199569 次浏览
小开

新的主题可能还不是Material Icons字体的一部分。链接。

小开
最佳答案

更新(2019年3月31日):现在所有图标主题都通过谷歌Web字体工作。

正如Edric所指出的，这只是在你的文档头部添加谷歌web字体链接的问题，就像这样:

<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">

然后添加正确的类来输出特定主题的图标。

<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>

图标的颜色也可以使用CSS来改变。

注意:双色主题图标目前有点小故障。

更新(2018年11月14日):与“_outline”一起工作的16个大纲图标列表;后缀。

下面是最新的16个大纲图标列表，它们与常规的材质图标Webfont一起工作，使用_outline后缀(经过测试和确认)。

(在材料设计图标github页面中找到。搜索:&;__abc1 &;)

<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>

注意，pie_chart需要是“;pie_chart_强劲< > < / >强概述"而不是大纲。

这是一个黑客测试使用内联标签的新图标主题。这不是官方的解决方案。

截至今天(2018年7月19日)，自新的图标主题引入2个多月以来，不可能使用内联标签<i class="material-icons"></i>来包含这些图标。

+马丁指出了Github上提出的一个问题:https://github.com/google/material-design-icons/issues/773

所以，直到谷歌提出了一个解决方案，我已经开始使用黑客包括这些新的图标主题在我的开发环境之前下载适当的图标为SVG或PNG。我想和大家分享一下。

重要的:不要在生产环境中使用它，因为从谷歌中包含的每个CSS文件大小都超过1MB。

谷歌使用这些样式表来展示他们的演示页面上的图标:

大纲:

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

圆:

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

深浅不一的:

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

夏普:

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

每个文件都包含各自主题的图标作为background-images (Base64 image-data)。下面是我们如何在下载到生产环境中使用之前，使用它来测试我们设计中特定图标的兼容性。

步骤1:

包含你想要使用的主题的样式表。 例如:对于'outline '主题，使用'outline.css'

的样式表

步骤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);
}

步骤3:

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

  1. < p > material-icons-new类

  2. 在材质图标演示页面上显示的图标名称，前缀为主题名称，后面跟着一个连字符。

前缀:

概述:outline-

圆形:round-

深浅不一的:twotone-

夏普:sharp-

Eg(表示“公告”图标):

__abc0， __abc1， __abc2， __abc3

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

改变图标大小:

因为这是一个背景图像而不是一个字体图标，所以使用CSS的height和width属性来修改图标的大小。在material-icons-new类中默认设置为24px。

例子:

对于account_circle图标的概述了主题:

  1. 包括样式表:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">
  1. 在你的页面上添加图标标签:
<i class="material-icons-new outline-account_circle"></i>

可选(对于深色背景):

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

对于评估图标的锋利的主题:

  1. 包括样式表:
<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">
  1. 在你的页面上添加图标标签:
<i class="material-icons-new sharp-assessment"></i>

(对于深色背景):

<i class="material-icons-new sharp-assessment icon-white"></i>

我再怎么强调也不为过，这不是在生产环境中包含图标的正确方式。但如果你必须在开发页面上浏览多个图标，那么添加图标就非常简单，可以节省大量时间。

当涉及到网站速度优化时，下载SVG或PNG格式的图标当然是更好的选择，但字体图标在原型设计阶段和检查特定图标是否与你的设计一致时，可以节省时间。

我将更新这篇文章，如果谷歌提出了一个解决这个问题的解决方案，不涉及下载图标使用。

小开

对我有用的是在图标名称后使用_outline而不是_outline <强> d。

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

vs

<mat-icon>info_outline</mat-icon>
小开

我最终使用IcoMoon应用程序创建了一个自定义字体，只使用我最近的web应用程序构建所需的新主题图标。它不是完美的，但你可以模仿现有的谷歌字体功能非常好，只需一点点设置。这里是一个总结:

https://medium.com/@leemartin/ howto -use-material-icon-outline -round -two-tone-and-sharp-themes-92276f2415d2

如果有人胆子大，他们可以用IcoMoon转换整个主题。IcoMoon可能有一个内部流程，因为他们已经在他们的库中设置了原始的材质图标。

不管怎样，这不是一个完美的解决方案，但对我来说很有效。

小开

我不满意，直到知道谷歌还没有发布他们的新设计字体或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>
小开

截至2019年2月27日，新的材质图标主题有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';
}
<!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>

或者在Codepen上查看它

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

body {
font-family: Roboto, sans-serif;
}
<!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>

编辑#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;
}
<!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>

或者在Codepen上查看它

小开

有点滑稽的是，谷歌制作了一种在Safari中正常工作但在Chrome中不正常的字体。这里是https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

safari中的红色圆形警告材料图标

引用https://stackoverflow.com/a/54902967/4740291并且不能使用css改变颜色。

小开

webfonts链接现在工作，在所有浏览器!

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

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

然后引用这个类，就像这样:

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


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

这个模式也适用于Angular Material:

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

Aj334最近的编辑工作完美。

谷歌CDN

<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">

图标元素

<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>
小开

如果你已经有material-icons在你的web项目中工作，只需要更新你在html文件中的引用和图标使用的类:

html引用:

之前

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

后

<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" />

材质图标类:

之后，检查你使用的className:

之前:

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

后:

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

这对我很有用……对于维达!

小开

对于角材质，你应该使用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>
...
小开

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

虽然从技术角度来看，这似乎是一个小问题，但从法律角度来看，这是一个大问题，至少如果您打算将您的页面呈现给任何欧盟公民(甚至，如果您无意中这样做)。对于位于美国(或欧盟以外任何国家)的公司来说，情况也是如此。

如果有人对为什么会这样感兴趣，我会在这里更新这个答案并给出更多细节，但现在，我不想浪费太多的空间。

话虽如此:

我按照两个非常简单的步骤下载了该字体的所有版本(常规，轮廓，圆形，锐利，双色)(这是@Aj334对他自己的问题的回答，让我走上了正确的轨道)(例如:“轮廓”变体):

  1. 通过直接让浏览器从谷歌CDN获取CSS 获取CSS URL，即复制以下URL到您的浏览器 地址栏:< / p > 

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

    这将返回一个看起来像这样的页面(至少在撰写本文时的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;
}

  2. Find the line starting with src: in the above code, and let your browser fetch the URL contained in that line, i.e. copy the following URL into your browser's location bar:

    https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2

    现在浏览器将下载.woff2文件并提供在本地保存它(至少Firefox是这样做的)

最后两点说明:

当然，您可以使用相同的方法下载该字体的其他变体。在第一步中，只需将URL中的字符序列Outlined替换为字符序列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

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

小开

把头部链接到谷歌样式

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

身体是这样的

<i class="material-icons-outlined">bookmarks</i>
小开

设置双色:

如上所述，你可以使用color css键，除了材料深浅不一的主题，这似乎是故障;-)

在github 问题中描述了一个使用自定义css过滤器的解决方法。这个自定义过滤器可以生成在这里。

例如:

Html:

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


<i class="material-icons-two-tone red">home</i>

css:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

附件:

  • Working Angular Stackblitz
  • < a href = " https://codepen。io/themau5/pen/QWwaYKR" rel="nofollow noreferrer">代码示例 . io/themau5/pen/QWwaYKR" rel="nofollow noreferrer">
  • < a href = " https://codepen。/a> . io/sosuke/pen/Pjoqqp" rel="nofollow noreferrer">Codepen CSS filter Generator . io/sosuke/pen/Pjoqqp" rel="nofollow noreferrer">
小开

截至2020年12月5日，你需要

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">

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>

注意:例如，要使用概括样式，您需要指定material-icons 和 material-icons-outlined类。

小开

对于Angular用户(在v14上测试):

如果你想改变全局使用的图标主题，例如outlined，你可以在你的AppModule或任何你需要它的地方这样做:

export class AppModule {
constructor(private readonly iconRegistry: MatIconRegistry) {
const defaultFontSetClasses = iconRegistry.getDefaultFontSetClass();
const outlinedFontSetClasses = defaultFontSetClasses
.filter(fontSetClass => fontSetClass !== 'material-icons')
.concat(['material-icons-outlined']);
iconRegistry.setDefaultFontSetClass(...outlinedFontSetClasses);
}
}

defaultFontSetClasses还包括mat-ligature-font类名，如果你在<mat-icon>元素中使用[fontIcon]属性绑定，你需要保留这个类名，以便正确呈现图标。

另外，记得加载Material Icons Outlined样式表:

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

每https://material.angular.io/components/icon/api#MatIconRegistry


提交答案