Question

如果这是一个非常简单的问题我很抱歉，但是如何在没有

的情况下使用Google素材图标

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

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

Answer 1

方法2.自托管 Developer Guide

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

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

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

@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 install material-design-icons --save

使用NPM

npm install material-design-icons --save

Answer 2

我正在为Angular 4/5构建并经常脱机工作，所以以下工作对我有用。首先安装NPM：

npm install material-design-icons --save

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

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

Answer 3

如果您使用webpack项目，请

之后

npm install material-design-icons --save

你只需要

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

Answer 4

上层方法对我不起作用。我从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');
}

这使得事情适合我。

Answer 5

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

获取此repository这是original repository 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">

Answer 6

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

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

/dev/sda5
如果使用SCSS，请将下面的内容复制到styles.scss文件的顶部。

npm install material-icons-font --save

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

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

@ angular / material中的图标在离线开发时往往会破裂。与@ angular / material一起添加material-icons-font程序包，可以在离线开发时使用标记。

Answer 7

我的食谱有三个步骤：

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

Answer 8

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

打开实体化存储库的iconfont文件夹

链路 [https://github.com/google/material-design-icons/tree/master/iconfont]
下载这三个图标文件 - ＆gt;

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中完成的

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

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

Answer 9

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

Answer 10

使用material-design-icons-iconfont

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

Google的material-design-icons项目维护成本低   和过时一段时间。版本之间存在差距   https://material.io/icons/及其中的版本   material-design-icons。

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

material-design-icons卡住了npm install-所有不相关的svg / xml / ...文件都已删除
字体文件始终直接来自Google Fonts CDN
对scss的支持

通过`npm`

安装

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

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

使用SCSS导入

导入您的一个sass文件

.scss

稍后，引用您所需的图标$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/'; @import '~material-design-icons-iconfont/src/material-design-icons'; + icon-id + 

</i>

阅读material-design-icons-iconfont上的完整说明以了解更多导入方法

演示页面

它带有demo page指示灯，可帮助搜索和复制粘贴字体

Answer 11

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

使用您自己的材料图标文件副本是一种有效的方法/实现。另一个，对于那些可以使用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＆gt;检查它是否已在Chrome中缓存申请＆gt;存储＆gt; IndexedDB并在名称中查找带有googleapis的条目。

Answer 12

具有角度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"
            ],

Answer 13

2019更新在这里：

要自托管您的材质图标，可以使用常规的，圆形的，锐利的所有图标。从此仓库中获取它们： official JavaDoc

由于某些原因，我不知道为什么从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将链接到项目中图标的位置。

现在让我们注册图标类：

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

同样，要使用更多的变体，例如夏普，只需像上面的两个一样添加它的方块即可。

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

hourglass_empty

phone

Answer 14

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

这里是怎么做的。你将在所有 icon.css 和 somefile.woff 下载两个文件。

根据标题

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

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

寻找像这样的一行

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

访问以.woff结尾的网址

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

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

Answer 15

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.Dead简单下载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文件。

Answer 16

安装npm软件包

npm install material-design-icons --save

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

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

Answer 17

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

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

Answer 18

npm install material-design-icons

和

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

在Angular Material 8中也为我工作过

Answer 19

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

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

Answer 20

顺便说一下，YouTube上提供了带有分步说明的视频。

https://youtu.be/7j6eOkhISzk

这些是步骤。从https://github.com/google/material-design-icons/releases
下载实现图标包
复制图标字体文件夹并将其重命名为图标。
打开materialize.css文件并更新以下路径：

a。从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'）

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

一切都会像魔术一样工作！

如何离线托管素材图标？

20 个答案:

使用material-design-icons-iconfont

通过`npm`

演示页面

如何离线托管素材图标？

20 个答案:

使用material-design-icons-iconfont

通过npm

演示页面

通过`npm`