如何离线托管素材图标？

Posted

技术标签:

【中文标题】如何离线托管素材图标？【英文标题】：How to host material icons offline? 【发布时间】：2016-09-13 05:47:46 【问题描述】：

如果这是一个非常简单的问题，我深表歉意，但是如果没有

，您如何使用谷歌素材图标 
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

?

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

【问题讨论】：

这篇文章解释了 Angular，认为可能对某人有帮助，thecodeframework.com/… 【参考方案1】：

避免

npm i material-design-icons

Google isn't publishing any new version to their npm repository，因此请避免使用npm i material-design-icons，因为上次发布是在 5 年前。

使用

    从their repo下载需要的字体。 你可以忽略 .codepoints 扩展。请注意，它们不再有 .woff2 和 .woff 类型，而是 .ttf 或 .otf works just fine。 将它们添加到您的资产文件夹中 进入css文件，添加以下内容 
@font-face 
  font-family: 'Material Icons';
  font-weight: 400;
  font-style: normal;
  src: local('Material Icons'), local('MaterialIcons-Regular'),
    url('/assets/fonts/MaterialIcons-Regular.ttf') format('truetype');


.material-icons 
  display: inline-block;
  font-family: 'Material Icons';
  font-size: 24px; /* Preferred icon size */
  font-weight: normal;
  line-height: 1;
  font-style: normal;
  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';
    然后添加.material-icons类 
<i class="material-icons">face</i>

Angular 用户如果已经使用mat-icon，则无需添加.material-icons

【讨论】：

【参考方案2】：

我使用这个包 (@mdi/font) 解决了它并将它导入到 main.js：

import '@mdi/font/css/materialdesignicons.css'

【讨论】：

【参考方案3】：

方法二、自托管 Developer Guide

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

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

将@font-face 的url 属性中的source 替换为本地项目中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 包

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

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

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

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

注意

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

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

【讨论】：

对于没有域的手机 GAP 应用程序，您将如何执行此操作？ 在 @font-face 的源 URL 中定位您的本地文件夹： url( "iconfont/MaterialIcons-Regular.woff2" -- 更新答案 嘿，您能否对此做出更新的回答。我已经用 npm 下载了我的 mdl 图标。 解决了我的问题……我只想指出，我们只需要整个存档中的 iconfont 文件夹。 对于这种类型的“将 cdn 资源移动到本地提供服务”，在更改前后拥有超过 3000 个请求的平均响应时间数据通常会有所回报 - 您会经常感到惊讶这不值得，无论你如何努力实现它......【参考方案4】：

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

    打开物化库的iconfont文件夹

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

    下载这三个图标文件->

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

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

    MaterialIcons-Regular.ttf - 格式（'truetype'）；

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

    现在，转到您的 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)

    您现在可以使用了，下面是如何在 html 中完成它 

&lt;i class="material-icons"&gt;face&lt;/i&gt;

点击here查看所有可以使用的图标。

【讨论】：

404 在您的链接上【参考方案5】：

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

https://youtu.be/7j6eOkhISzk

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

    复制 icon-font 文件夹并将其重命名为图标。

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

一个。从 url(MaterialIcons-Regular.eot) 到 url(../fonts/MaterialIcons-Regular.eot) 湾。从 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')

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

一切都会变魔术！

【讨论】：

【参考方案6】：

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 文件。

【讨论】：

不适用于所有浏览器，请参阅此 SO 答案以获取更多信息：***.com/questions/11002820/…【参考方案7】：

2019 年更新在这里：

自行托管您的材料图标，常规图标、圆形图标、尖锐图标、所有变体图标。 从这个 repo 中获取它们： https://github.com/petergng/material-icon-font

出于某种原因，我不知道为什么这些字体不容易从 Google 存储库中访问。

但是给你。

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

要使用它们，请创建一个 css 文件并

    为您需要的每个变体生成字体： 
@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 将链接到图标在项目中的位置。

    现在让我们注册图标类： 
.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，只需将其附加到两个类名即可。

    最后，让我们插入您从第 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>

【讨论】：

【参考方案8】：

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

    安装包。 npm install material-icons-font --save

    将包的 CSS 文件的路径添加到项目的 angular.json 文件的样式属性中。

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

    如果使用 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';

    使用项目 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包可以让你在离线开发的同时使用标签。

【讨论】：

简单而干净的实现 - 完美运行，谢谢！作为当前最有效的解决方案，这应该是公认的答案…… 有没有一种方法可以让我离线使用 face ，即无需更改为 face 我完全同意@Mike。这是最好的实现。谢谢分享！【参考方案9】：

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

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

【讨论】：

【参考方案10】：

安装 npm 包

npm install material-design-icons --save

将css文件路径放到styles.css文件中

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

【讨论】：

【参考方案11】： 
npm install material-design-icons

和

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

Angular Material 8 也为我工作

【讨论】：

【参考方案12】：

带角度剪辑

npm install angular-material-icons --save

或

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

material-design-icons-iconfont 是图标的最新更新版本。 angular-material-icons 很久没更新了

等待等待安装完成，然后将其添加到 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"
            ],

【讨论】：

【参考方案13】：

使用material-design-icons-iconfont

完全披露，我是这个包的作者

Google 的 material-design-icons 项目维护成本低 并且已经过时了一段时间。版本之间有差距 https://material.io/icons/ 和版本 material-design-icons。

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

material-design-icons jams npm install - 所有不相关的 svg/xml/... 文件已被删除 字体文件始终是最新的，直接来自Google FontsCDN 支持 scss

通过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';

稍后，引用您想要的图标 &lt;i class="material-icons"&gt; + icon-id + &lt;/i&gt; 

<i class="material-icons">contact_support</i>
阅读material-design-icons-iconfont 上的完整说明了解更多导入方法

演示页面

自带灯demo page，帮助搜索和复制粘贴字体

【讨论】：

我遇到了 PWA 问题。当您在浏览器中时，图标正在工作，但是一旦您在主屏幕上添加快捷方式并运行应用程序图标就不会显示。【参考方案14】：

完成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';

【讨论】：

【参考方案15】：

我的食谱分为三个步骤：

    安装material-design-icons包

    npm install material-design-icons

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

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

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

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

【讨论】：

这个包不存在了 使用 Angular cli，执行 npm install material-design-icons 然后在 angular.json -> architect->build->styles 中添加 css【参考方案16】：

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

npm install material-design-icons --save

然后将以下内容添加到styles.css：

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

【讨论】：

当调用“npm install”时等待等待等待大声笑......但在很长一段时间后工作 @SergioCabral 幸运的是你发表了关于等待的评论，因为大约有 5 次我认为这个安装不会去任何地方...... :) 谢谢你喜欢这是最好的解决方案谢谢你 知道如何添加轮廓图标吗？ 原来 google 存储库没有得到很好的维护。我找到的解决方案是使用 npm install material-design-icons-iconfont，它是 google 存储库的一个分支，具有许多修复和性能改进。【参考方案17】：

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

获取此repository，它是 Google 发布的 original repository 的一个分支。

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

【讨论】：

即使使用 Angular 的标准 mat-icon 组件，也可以使用 material-design-icons-iconfont 包。因此过渡是无缝的。 这是对我有用的解决方案，除了 index.html 中的样式表链接不起作用 - 我必须在我的 Styles.scss 文件中添加一个导入：@import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css"; 然后我在本地托管图标跃入生活 另外，导入你的 scss 意味着它是一个构建时间依赖，你可以 NPM install --dev 不让它成为产品节点环境足迹的一部分。【参考方案18】：

问题标题询问如何离线托管素材图标，但正文澄清目标是使用离线素材图标（强调我的） em>。

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

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

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

然后您可以使用 F12 > Application > Storage > IndexedDB 检查它是否缓存在 Chrome 中，并查找名称中包含 googleapis 的条目。

【讨论】：

我还做了一些小的改动。我将“workboxSW”更改为“workbox”。我将“路由器”更改为“路由”并将此代码添加到我的 sw_config.js 文件中，该文件在使用工作箱 cli 向导时生成。【参考方案19】：

如果你使用 webpack 项目，之后

npm install material-design-icons --save

你只需要

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

【讨论】：

我不建议这样做，这个 repo 太大了，使用一个 desc。在npmjs.com/package/material-design-icons-iconfont 下面我还注意到浏览器会缓存fonts.googleapis.com/icon?family=Material+Icons 并且它会在离线模式下工作。结帐keemor.github.io/# 我是 npm 的新手，你能详细说明一下import materialIcons from 'material-design-icons/iconfont/material-icons.css'。我们把这条线加到哪里？ app.js 或其他地方。我正在使用带有 Vue 的 framework7 并且我尝试过。它对我不起作用。 @SuatAtanPhD 您像任何其他样式导入一样添加此导入。如果你使用 webpack，你需要 style-loader、css-loader 之类的东西，你可以将这个导入放在你的 js 代码中的任何地方，例如 index.js 或 app.js 等。 推荐这种方法用于构建可以在内部网络中工作而无需访问 Internet 的企业 Web 应用程序【参考方案20】：

上面的方法对我不起作用。 我从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 文件。

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

@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');

这让事情对我有用。

【讨论】：

谢谢！我有同样的问题，这为我解决了。 我用这种方法解决了我的问题，但后来我找到了另一个 git repo，从那里我得到了正确的版本。 @Kaloyan Stamatov 很高兴分享那个 git repo.. 因为很多人对过时的官方 repo 有问题:) @Grashopper，我没有了。对不起 2019 年更新更多，这个解决方案也对我有用。【参考方案21】：

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

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

    根据标头要求转到以下网址

&lt;link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;.

将页面保存为whatever_filename.css。默认是 icon.css

    找这样一行

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

    访问以 .woff 结尾的 URL

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

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

【讨论】：

以上是关于如何离线托管素材图标？的主要内容，如果未能解决你的问题，请参考以下文章

如何在android的谷歌地图V2上添加谷歌素材图标“我的位置”？

加载谷歌素材图标时如何修复IE11中的CSS311？

Unity游戏开发精品素材资源——2D图标素材篇（头像、装备与物品、技能）

有没有啥好的设计图标素材网站？

如何离线使用字体图标？

21套非常棒的网页设计图标素材