如何离线托管素材图标？

Question

如果这是一个非常简单的问题我很抱歉,但是你如何使用没有的谷歌材料图标

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

？

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

Answer 1

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

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

您只需要使用存档中的iconfont文件夹:它包含不同格式的图标字体(用于多个浏览器支持)和样板文件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包

谷歌正式拥有Bower和NPM依赖选项 - 请遵循Material Icons Guide 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

截至 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 结合使用可以让您在离线开发时使用标签。

Answer 4

如果您使用webpack项目,之后

npm install material-design-icons --save

你只需要

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

Answer 5

上层方法对我不起作用.我从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 6

避免

npm i material-design-icons

Google 不会向其 npm 存储库发布任何新版本，因此请避免使用 ，npm i material-design-icons因为上次发布是 5 年前。

使用

1. 从他们的存储库下载所需的字体。您可以忽略.codepoints扩展名。请注意，他们不再有.woff2and.woff类型，但.ttfor.otf 工作得很好。
2. 将它们添加到您的资产文件夹中
3. 到 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';
}

4. 然后添加.material-icons类

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

.material-iconsAngular用户如果已经使用则无需添加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>

Answer 7

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

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

用凉亭或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 8

我的食谱有三个步骤:

1. 安装material-design-icons包

   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>
   

Answer 9

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

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

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

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

演示页面

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

Answer 10

我试图在我的答案中编译自托管图标需要做的所有事情。您需要遵循以下 4 个简单步骤。

1. 打开materialize仓库的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>

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