Question

我的 Angular 应用程序托管在没有互联网连接的服务器上，因此，我从我的 index.html 中删除了以下代码：

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

并通过 npm 下载它们：npm install material-design-icons --save

并在我的 idex.html 中像这样添加它们： <link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

一切似乎都很好，除了这个图标外，大多数图标都可以正常工作：

不管我是不是这样使用它：

<span class="material-icons">
  read_more
</span>

或者这个

<mat-icon
  read_more
</mat-icon>

甚至作为字符代码，因为我认为它与连字有关（我从这里获取代码https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints）

<mat-icon>
  &#xef6d;
</mat-icon>

如果我在我的 index.html 中使用 <link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet"> 并且有互联网连接，它确实有效，但我需要找到一种在没有互联网连接的情况下工作的方法。 >

有人有想法吗？

Answer 1

尝试将其添加到 angular.json 而不是 index.html。此外，请检查该图标是否在您下载的版本中可用。尝试降级软件包并运行 npm install 命令。

Answer 2

我使用“fontface”解决了我的问题：https://github.com/fontsource/fontsource

我使用 npm install @fontsource/material-icons 安装了 int，这会添加以下文件夹：

我在主样式文件中添加了以下内容：

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

在我的主样式文件（我使用 scss）中，我添加了以下内容：

@import "~@fontsource/material-icons/index.css";

这对我有用。我也可以在没有代码的情况下使用图标：

<mat-icon>read_more</mat-icon>

特定材质图标未离线显示

2 个答案: