ionic-framework - 将 Material 图标添加到 Ionic 3 项目

Question

我们的网络应用程序有这些素材图标:https://fonts.googleapis.com/icon?family=Material+Icons

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

如何添加它们？理想情况下，我想像使用其他 Ionic 图标一样使用它们:

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

谢谢。

Answer 1

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

首先，您可以使用 Google 的字体 url 轻松导入，但如果用户的设备没有互联网连接，这将不起作用:

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