Question

我们的网络应用程序包含以下材质图标：https://fonts.googleapis.com/icon?family=Material+Icons

我们目前正在开发Ionic Framework 3中的移动版本，我们希望使用相同的图标，但其中一些不包含在框架中。

我该如何添加它们？理想情况下，我想像其他离子图标一样使用它们：

<ion-tab [root]="tab1Root" tabTitle="Something" tabIcon="some-material-icon"></ion-tab>

感谢。

Answer 1

也许这是一个迟到的答案，但我想分享我所知道的。

首先，我想说您可以使用Google的字体网址轻松导入，但如果用户的设备没有网络连接则无法使用 ：

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

INSTEAD ，我建议将整个字体导入项目中。为此，您可以下载不同平台的所有 MaterialIcons 字体类型（eot，ttf，woff，woff2，ijmap，svg）：

https://drive.google.com/file/d/1pq9dHrfWBsd5NFoaaB76tZ8nEzBbGrbN/view?usp=sharing

然后，提取文件并将其移动到Ionic项目的assets/fonts/文件夹下。在 variables.scss 中，您可以找到以下代码行：

$font-path: "../assets/fonts";

如果没有，只需添加该行即可。此外，通过将这些代码块添加到 variables.scss 中，使用新字体介绍您的项目：

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url($font-path + '/MaterialIcons-Regular.eot'); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url($font-path + '/MaterialIcons-Regular.woff2') format('woff2'),
    url($font-path + '/MaterialIcons-Regular.woff') format('woff'),
    url($font-path + '/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;

  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

那就是它！使用您需要的图标：

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

Answer 2

请遵循以下文档：http://google.github.io/material-design-icons/

简单方法： 1.

＆＃13;

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

＆＃13;

＆＃13;
＆＃13;
```
<i class="material-icons">face</i>
```
＆＃13;
＆＃13;
＆＃13;

Answer 3

好吧，我希望这对使用离子4的人可能有所帮助。要在ionic 4应用程序中添加材质图标，请执行以下步骤。

ng add @angular/material

根据您的喜好按照CLI上的说明进行操作。

在html中使用

<span class="mi mi-face"></span>

将材质图标添加到Ionic 3项目中

3 个答案: