方法 2. 自托管 开发人员指南

从 github下载最新版本（资产：zip 文件），解压并将包含材料设计图标文件的字体文件夹复制到您的本地项目中 -- https://github.com/google/material-design-icons/发布

您只需要使用存档中的字体文件夹：它包含不同格式的图标字体（用于多浏览器支持）和样板 css。

• 将 url 属性中的源替换为@font-face本地项目中 iconfont 文件夹的相对路径（字体文件所在的位置），例如。url("iconfont/MaterialIcons-Regular.ttf")

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

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

NPM / Bower 包

谷歌官方有一个 Bower 和 NPM 依赖选项——遵循 Material Icons Guide 1

使用凉亭：bower install material-design-icons --save

使用 NPM：npm install material-design-icons --save

Material Icons：或者查看用于自托管图标的 Material design 图标字体和 CSS 框架，来自@marella 的https://marella.me/material-icons/

笔记

似乎谷歌的项目处于低维护模式。在撰写本文时，最后一次发布是 3 年前！

GitHub 上有几个关于此的问题，但我想参考 @cyberalien 对该问题的评论，Is this project actively maintained? #951其中提到了几个分叉并继续维护材料图标的社区项目。

我正在为 Angular 4/5 构建并且经常离线工作，因此以下内容对我有用。首先安装 NPM：

npm install material-design-icons --save

然后在styles.css中添加以下内容：

@import '~material-design-icons/iconfont/material-icons.css';

上面的方法对我不起作用。我从github下载文件，但浏览器没有加载字体。

我所做的是打开材质图标源链接：

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

我看到了这个标记：

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  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;
}

我打开woff字体url链接https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

并下载 woff2 文件。

然后我用 material-icons.css 中的新路径替换 woff2 文件路径

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

这让事情对我有用。

到 2020 年，我的方法是使用material-icons-font包。它简化了 Google 的material-design-icons包和基于社区的material-design-icons-iconfont 的使用。

1. 安装软件包。 npm install material-icons-font --save

2. 将包的 CSS 文件的路径添加到项目的 angular.json 文件的 style 属性。

   ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

3. 如果使用 SCSS，请将下面的内容复制到 style.scss 文件的顶部。

   @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

4. 使用项目的 HTML 文件中的图标。

   // Using icon tag
   <i class="material-icons">face</i>
   <i class="material-icons md-48">face</i>
   <i class="material-icons md-light md-inactive">face</i>
   
   // Using Angular Material's <mat-icon> tag
   <mat-icon>face</mat-icon>
   <mat-icon>add_circle</mat-icon>
   <mat-icon>add_circle_outline</mat-icon>
   

来自@angular/material 的图标在离线开发时往往会损坏。添加 material-icons-font 包与@angular/material 结合使用，可以在离线开发时使用标签。

如果你使用 webpack 项目，之后

npm install material-design-icons --save

你只需要

import materialIcons from 'material-design-icons/iconfont/material-icons.css'