如何离线托管材质图标？

我很抱歉，如果这是一个非常简单的问题，但是您如何使用Google材料图标而不用

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

？

我希望我的应用程序即使用户没有互联网连接也能够显示图标

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

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

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

• 将@ font-face的url属性中的源替换为本地项目中（字体文件所在的位置）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 /凉亭套餐

Google正式提供Bower和NPM依赖项选项-遵循Material Icons Guide 1

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

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

材料图标：或者，从@marella的https://marella.me/material-icons/查看材料设计图标字体和CSS框架，以自托管图标。

注意

看来Google在低维护模式下具有该项目。在撰写本文时，最新版本是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字体网址链接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');
}

那使事情对我有用。

如果您使用webpack项目，

npm install material-design-icons --save

你只需要

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

这可能是一个简单的解决方案

获取此存储库，该存储库是Google发布的原始存储库的分支。

用bower或npm安装它

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

在HTML页面上导入CSS文件

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

要么

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

测试：在HTML文件的body标签内添加图标

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

如果看到面部图标，就可以了。

如果不起作用，请尝试将其..作为前缀添加到node_modules路径：

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

我的食谱包括三个步骤：

1. 安装材料设计图标包

   npm install material-design-icons

2. 将material-icons.css文件导入.less或.scss文件/项目

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

3. 将推荐的代码包含到reactjs .js文件/项目中

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>

使用material-design-icons-iconfont

完全公开，我是该软件包的作者

Google的 材料设计图标项目维护成本低， 并且过时了一段时间。https://material.io/icons/中的版本与material-design-icons中的版本 之间存在差距 。

我创建了material-design-icons-iconfont来解决以下主要问题：

• material-design-icons卡纸npm install-删除了所有不相关的svg / xml / ...文件
• 字体文件始终是Google FontsCDN 的最新文件
• 对SSS的支持

通过安装 npm

npm install material-design-icons-iconfont --save

这取决于您打包Web应用程序的方式（webpack/gulp / bower/ ...），需要导入.css/ .scss文件（并且可能会更改相对字体路径）

使用SCSS导入

导入您的sass文件之一

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

稍后，引用所需的图标<i class="material-icons">+图标ID +</i>

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

• 阅读有关的完整说明 material-design-icons-iconfont获取更多导入方法

演示页面

它带有一个简短的演示页面，可帮助搜索和复制粘贴字体

我已经尝试在答案中编译自托管图标所需完成的所有工作。您需要遵循以下4个简单步骤。

1. 打开物化存储库的iconfont文件夹

   链接-[ https://github.com/google/material-design-icons/tree/master/iconfont]

2. 下载这三个图标文件->

   MaterialIcons- Regular.woff2-格式（'woff2'）

   MaterialIcons-Regular.woff-格式（'woff'）

   MaterialIcons-Regular.ttf -format（'truetype'）;

   注意-下载后，您可以将其重命名为您喜欢的任何名称。

3. 现在，转到您的CSS并添加此代码

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(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';
}

注意：src：url（...）中提供的地址应相对于“ CSS文件”，而不是index.html文件。例如，它可以是src：url（../ myicons / MaterialIcons-Regular.woff2）

4. 现在就可以使用了，这里是如何用HTML来完成的操作

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

单击此处查看所有可以使用的图标。

完成后npm install material-design-icons，将其添加到主CSS文件中：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/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';
}

带角度的cli

npm install angular-material-icons --save

要么

npm install material-design-icons-iconfont --save

material-design-icons-iconfont是图标的最新更新版本。角材料图标长时间不更新

等待，等待，等待安装完成，然后将其添加到angular.json->项目->架构师->样式

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

或者，如果您安装了material-desing-icons-iconfont，则

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

2019更新在这里：

为了自托管您的材质图标，可以使用常规图标，圆形，锐利的所有变体。从此仓库中获取它们：https : //github.com/petergng/material-icon-font

由于某些原因，我不知道为什么这些字体无法从Google存储库中轻松访问。

但是，你走了。

下载软件包后，转到bin文件夹，您将看到四个变体。当然，这取决于您使用哪种方式。

要使用它们，请创建一个CSS文件，然后

1. 为您需要的每个变体生成一个字体：

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

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

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

在url将链接到图标都位于项目。

2. 现在让我们注册图标类：

.material-icons-outlined, .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;
}

这将使 .material-icons-outlined, 和 .material-icons类使用相同的默认值。如果要使用.material-icons-sharp，只需将其附加到两个类名称上即可。

3. 最后，让我们插入您从步骤1插入的字体。

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

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

同样，要使用更多的变体，例如Sharp，只需像上面的两个一样添加其块。

完成后...转到html并使用新创建的图标。

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

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

在页面中包含的样式标题信息http://materialize.com/icons.html上，您可以转到实际的超链接并进行本地化复制以离线使用图标。

注意：您将在全部icon.css和somefile.woff中下载两个文件。

1. 根据标题转到所需的以下URL

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

将页面另存为what_filename.css。默认为icon.css

2. 寻找这样的一条线

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. 访问以.woff结尾的URL

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2。您的浏览器将自动下载它。将其保存在CSS文件夹中。

4. 现在，您应该拥有两个文件icon.css和2fcrYFNa .... mY.wof22，将它们都保存在CSS中。现在，在css标头位置中对目录中的icon.css进行编辑。只要确保.woff2文件始终与icon.css放在同一文件夹中即可。随意编辑长文件名。

该问题的标题问如何主机材料图标脱机但身体澄清，目的是利用材料的图标离线（重点煤矿）。

使用您自己的材料图标文件副本是一种有效的方法/实现。对于那些可以使用服务人员的人，另一个是让服务人员来照顾它。这样，您就不必麻烦地获取副本并保持最新。

例如，使用Workbox生成服务人员，使用最简单的方法运行workbox-cli并接受默认值，然后将以下文本附加到生成的服务人员中：

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

然后，您可以使用F12>应用程序>存储> IndexedDB来检查它是否已缓存在Chrome中，并在名称中查找带有googleapis的条目。

从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，请将下面的内容复制到styles.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中的图标往往会损坏。与@ angular / material一起添加material-icons-font包，可以在脱机开发时使用标记。

安装npm软件包

npm install material-design-icons --save

将CSS文件路径放入styles.css文件

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Kaloyan Stamatov方法是最好的。首先转到https://fonts.googleapis.com/icon?family=Material+Icons。并复制css文件。内容看起来像这样

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.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;
}

将字体的源粘贴到浏览器以下载woff2文件 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 然后替换原始源中的文件。您可以重命名它，而无需从github下载60MB文件。死了简单我的代码看起来像这样

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.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;
}

而materialIcon.woff2是下载并替换的woff2文件。

npm install material-design-icons

和

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

Angular Material 8也为我工作

将此添加到Web配置中，错误消失了

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

顺便说一句，YouTube上有视频，并提供分步说明。

https://youtu.be/7j6eOkhISzk

1. 这些是步骤。从https://github.com/google/material-design-icons/releases下载实现图标包

2. 复制图标字体文件夹并将其重命名为图标。

3. 打开materialize.css文件并更新以下路径：

一个。从url（MaterialIcons-Regular.eot）到url（../ fonts / MaterialIcons-Regular.eot）b。从url（MaterialIcons-Regular.woff2）格式（'woff2'）到url（../ fonts / MaterialIcons-Regular.woff2）格式（'woff2'）c。从url（MaterialIcons-Regular.woff）格式（'woff'）到url（../ fonts / MaterialIcons-Regular.woff）格式（'woff'）d。从url（MaterialIcons-Regular.ttf）格式（'truetype'）到url（../ fonts / MaterialIcons-Regular.ttf）格式（'truetype'）

3. 将materialize-icon.css复制到您的css文件夹，并在您的html文件中引用它。

一切都会像魔术一样起作用！