小开

最佳答案

方法2. 自托管 < a href = “ https://google.github.io/Materials-design-icon/”rel = “ noReferrer”> 开发者指南

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

用本地项目中 iconfont 文件夹的相对路径(字体文件所在的位置)替换 @font-face的 url 属性中的源代码。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 依赖选项——按照材质图标指南 1

使用 bower : bower install material-design-icons --save

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

材质图标 : 或者查看材质设计图标字体和 CSS 框架来自@marella 的 < a href = “ https://marella.me/Materials-icon/”rel = “ noReferrer”> https://marella.me/Material-Icons/

注意

似乎谷歌有低维护模式的项目在写这篇文章的时候，发布时间是3年前！

在 GitHub 上有几个关于这个的问题，但是我愿意参考@Cyberforeign 对问题 Is this project actively maintained? #951的评论，其中提到了几个社区项目分叉和继续保持材料图标。

小开

在我的回答中，我已经尝试编译了所有需要为自托管图标做的事情。你需要遵循以下4个简单的步骤。

打开 Materials alize 存储库的 iconfont 文件夹

连结- Https://github.com/google/material-design-icons/tree/master/iconfont
下载这三个图标文件->

物质图标-正则. woff2 -format (‘ woff2’)

材质图标-正则. woff -format (‘ woff’)

材质图标-规则的. 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 (。./myicon/Materials 图标-规则。沃夫2)

您现在已经准备好使用它了，下面介绍如何在 HTML 中实现它

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

Click here to see all the icons that can be used.

小开

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

注意: 您将在所有 图标，CSS和 一些文件 Woff中下载两个文件。

根据需要转到标题中的以下 URL

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

将 page 保存为 whatever _ filename. css

找一条这样的线

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

访问包含.woff 结尾的 URL

你的浏览器会自动下载它。保存在你的 CSS 文件夹。

现在应该有两个文件 图标，CSS和 2fcrYFNa... . mY.wof22，将它们都保存在 css 中。现在在 css 头部位置对目录中的 icon.css 进行编辑。只要确保。Woff2文件总是和 icon.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 字体的网址链接译自: 美国《科学》杂志网站(href = “ https://fonts.gstatic.com/s/Materials alicon/v22/2fcrYFnaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2”rel = “ norefrer”> https://fonts.gstatic.com/s/materialicons/v22/2fcryfnatjcs6g4u3t-y5zjzjt5fdej140u2djyc3my.woff2

下载 woff2文件。

然后，我将 woff2文件路径替换为 Materials-icon. 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');
}

这对我来说很有用。

小开

如果使用 webpack 项目，则在

npm install material-design-icons --save

你只需要

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

小开

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

得到这个储存库，这是一个分叉的原始资料库谷歌出版。

用 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 文件的主体标记中添加一个图标

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

如果你看到脸部图标，你就没事了。

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

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

小开

题目问如何离线 主持人材质图标，但正文澄清目标是要使用材质图标离线 (强调我的)。

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

例如，使用工作箱生成一个服务工作者，使用最简单的方法运行 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 的条目。

小开

我正在建设的角4/5，并经常离线工作，所以以下工作对我来说。首先安装 NPM:

npm install material-design-icons --save

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

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

小开

Kaloyan Stamatov 方法是最好的。首先转到 https://fonts.googleapis.com/icon?family=Material+Icons.and 复制 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;
}

Woff2是下载并替换的 woff2文件。

小开

我的食谱有三个步骤:

安装材料设计图标包
```
npm install material-design-icons
```

to import material-icons.css file into .less or .scss file/ project

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

to include recommended code into the reactjs .js file/ project

<i className='material-icons' style=\{\{fontSize: '36px'}}>close</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';
}

小开

使用材料-设计-图标-图标字体

老实说，我是这个包裹的作者

谷歌的材料-设计-图标项目是低维护的和 过时了一段时间之间有一个差距的版本 Https://material.io/icons/及版本材料-设计-图标。

我创建材料-设计-图标-图标字体就是为了解决这些主要问题:

布料-设计-图标 jams npm install-所有不相关的 svg/xml/... 文件已被删除
字体文件总是最新的直接从 Google Fonts CDN
对 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';

稍后，引用您想要的图标 <i class="material-icons"> + icon-id + </i>

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

阅读材料-设计-图标-图标字体上的完整说明以了解更多导入方法

演示页面

它带有一个轻演示页面，以协助搜索和复制粘贴字体

小开

有角斜面

npm install angular-material-icons --save

或者

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

材料-设计-图标-图标字体是图标的最新更新版本。角材料-图标很长时间没有更新

等待等待安装完成，然后将其添加到 angular.json-> Projects-> Architecture-> style

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

或者如果你安装了材料-设计-图标-图标字体

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

小开

2019年更新:

自我托管您的物质图标，规则的，圆形，锐利，所有的变种。从这个回收站拿过来: Https://github.com/petergng/material-icon-font

出于某种原因，我不知道为什么这些字体不容易从谷歌仓库访问。

给你。

下载包之后，转到 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>

小开

npm install material-design-icons

还有

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

也为我工作与角材料8

小开

安装 npm 包

npm install material-design-icons --save

把 css 文件路径放到 styles.css 文件

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

小开

把这个添加到 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>

小开

到2020年，我的方法是使用材料-图标-字体包。它简化了 Google 的材料-设计-图标包和基于社区的材料-设计-图标-图标字体的使用。

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

“风格”: [ ”./node _ module/Materials-icon-font/Materials-icon-font. css ], ...
如果使用 SCSS，请将下面的内容复制到 styles.SCSS 文件的顶部。

@ import’~ Materials-icon-font/sass/variable’; @ import’~ Materials-icon-font/sass/Mixins’; 美元材质图标 _ FontPath: “ ~ Materials-icon-font/font”; @ import’~ Materials-icon-font/sass/main’; @ import’~ Materials-icon-font/sass/Rules’;

使用项目的 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>

Icons from @angular/material tend to break when developing offline. Adding material-icons-font package in conjunction with @angular/material allows you to use the tag while developing offline.

小开

顺便说一下，在 youtube 上有一个视频，里面有一步一步的说明。

Https://youtu.be/7j6eokhiszk

下载实体化图标软件包，请点击“ http://github.com/google/matter-design-icon/release”rel = “ nofollow norefrer”> https://github.com/google/material-design-icons/releases
复制图标-字体文件夹并将其重命名为图标。
打开 fialize.css 文件并更新以下路径:

A. from url (Materials alIcon-Rules. eot) to url (. ./fonts/Materials alIcon-Rules. eot) B. 从 url 格式(‘ woff2’)到 url 格式(. ./font/Materials Icon-Rules. woff2)(‘ woff2’) C. 从 url 格式(‘ woff’)转换为 url 格式(. ./fonts/Materials 图标-规则. woff)格式(‘ woff’) D. 从 url 格式(‘ truetype’)到 url 格式(. ./fonts/Materials ialIcon-Rules. ttf)(‘ truetype’)

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

一切都会像魔法一样！

小开

我使用这个包(@mdi/font)解决了这个问题，并导入 main.js:

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

小开

避免

npm i material-design-icons

谷歌没有发布任何新版本到他们的 npm 存储库，所以请 避免使用 npm i material-design-icons，因为上一次发布是在5年前。

使用

从他们的回购协议下载所需的字体。请注意，他们不再有 .woff2和 .woff类型，但 .ttf或 .otf 没问题。
将它们添加到您的资产文件夹中
在 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>

角度用户不需要添加 .material-icons，如果他们已经使用 mat-icon

同时提纲和定期

都有，轮廓和正常的？
这是台阶。

因为我很懒，所以我使用了 scss @extend方法。

@font-face {
font-family: 'Material Icons Outlined';
font-weight: 400;
font-style: normal;
src: local('Material Icons Outlined'), local('MaterialIconsOutlined-Regular'),
url('/assets/fonts/MaterialIconsOutlined-Regular.otf') format('truetype');
font-display: fallback;
}


.material-icon {
// Same content as the previous example without the `font-family`
}


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


.material-icons-outlined {
@extend .material-icon;
font-family: 'Material Icons Outlined';
}

<mat-icon class="material-icons-outlined" svgIcon="dark_mode-outline"></mat-icon>

小开

当我在角材料项目中也面临同样的挑战时，我想出了一个离线工作的解决方案。保留所有细节。

下载资源后，只需在 README.md 文件中执行以下步骤

步骤1

将发行版复制到项目中

步骤2

在 angular.json 导入数组中导入样式表

例子

`angular.json [
{
style[
"css/material.css", "css/icons.css"
]
} `

步骤3

在下次自动重新加载之后，您应该会看到您的图标脱机显示。

Optionally，您可以注释或从 index.html文件中删除这一行 https://fonts.gstatic.com https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap https://fonts.googleapis.com/icon?family=Material+Icons。

HAPPYCODING :)

我为马特康创建了一个离线存储库，您可以从这个链接下载它。 :)

小开

我选择了一个懒惰的解决方案来回避劝阻:

<link href="https://MYHOST/gfonts/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
<link href="https://MYHOST/gfonts/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

添加小的 apache 插件

a2enmod substitute

在我的 apache 配置里

AddOutputFilterByType INFLATE;SUBSTITUTE;DEFLATE text/html text/plain text/xml text/css
Substitute "s|https://fonts.gstatic.com/|/gsfonts/|i"
SSLProxyEngine on
ProxyPass "/gfonts/"  "https://fonts.googleapis.com/"
ProxyPassReverse "/gfonts/"  "https://fonts.googleapis.com/"
ProxyPass "/gsfonts/"  "https://fonts.gstatic.com/"
ProxyPassReverse "/gsfonts/"  "https://fonts.gstatic.com/"

小开

添加这个以防它帮助某人... 这可能不适用于您的用例，但它可能适用于某人。我有一台离线电脑，我使用一个应用程序，使用物化。我也试图解决这个问题，但是那个 github 回购是巨大的，我有一个困难的时间遵循所有的指示。此外，<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">标签减慢了我在离线电脑上打开应用程序的速度，因为它一直试图下载那个文件，但是下载不了。

下面是我所做的(在这个注释底部的工作示例)

在 https://fonts.googleapis.com/icon?family=Material+Icons下载该文件，并将其作为本地 css 文件存储在您的网站目录中
向 index.html添加一个指向在步骤1中保存的文件的 <link>标记。(例如，我将 https://fonts.googleapis.com/icon?family=Material+Icons保存为 asset/css/ateralize _ off _ files/ateralize-icon。Css，然后将其添加到 index.html: <link href="assets/css/materialize_offline_files/materialize-icons.css" rel="stylesheet"> rel="stylesheet">。)注意: 确保在导入 Materials alize.css 之前添加这个 link 标记。
对步骤1中的文件进行修改。 如果您查看 https://fonts.googleapis.com/icon?family=Material+Icons处的文件，您会发现后退字体的这行 css 代码: src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');。在 src 网址下载该文件，< a href = “ https://fonts.gstatic.com/s/ateralicon/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2”rel = “ nofollow norefrer”> https://fonts.gstatic.com/s/materialicons/v139/fluhrq6tzzclqej-vdg-iuiadsnc.woff2 ，将其保存到与 medialize _ icon 相同的目录中。Css (步骤1中的文件) ，并将该行代码更改为: src: url("flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');

工作示例(4个文件) :

Html

<!DOCTYPE html>
<html>
<head>
<link href="assets/css/materialize_offline_files/materialize-icons.css" rel="stylesheet">
<link href="assets/css/materialize.min.css" rel="stylesheet">
</head>
<body>
<button class="btn waves-effect waves-light">Hello!
<i class="material-icons right">send</i>
</button>
</body>
</html>

Asset/css/ateralize _ off _ files/ateralize-icon. css

/*
* File downloaded from https://fonts.googleapis.com/icon?family=Material+Icons
* with slight modification (src url of fallback font)
*/


/* fallback */
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
/**src: url(https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');*/
src: url("flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2") format('woff2');
/**
* flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 is the file
* downloaded from
* https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
* NOTE:: css src url attributes are relative to the css file,
* so store flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2
* IN THE SAME DIR as this css file, for that modification to work.
*/
}


.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;
}

最后(剩下的2个文件) ，确保你有这些文件:

Asset/css/Materials alize.min.css (从 https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css下载)
Woff2 (从 < a href = “ https://fonts.gstatic.com/s/ateralicon/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2”rel = “ nofollow noReferrer”> https://fonts.gstatic.com/s/materialicons/v139/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2下载

我原以为这样可以解决 fonts.googleapis.com 拖慢应用速度的问题，但实际上我使用的几个图标现在已经出现在离线电脑上了。我不确定它是否适用于所有的图标，但它对我来说是适用的。

如何离线托管材质图标？

使用 材料-设计-图标-图标字体

通过 npm安装

演示页面

避免

使用

同时提纲和定期

步骤1

步骤2

例子

步骤3

使用材料-设计-图标-图标字体

通过 `npm`安装