离子材料设计图标字体

Question

有没有可能在离子项目中加入谷歌素材设计图标？

http://zavoloklom.github.io/material-design-iconic-font/icons.html

Font-非常好的工作。

我找不到任何有关Material Design图标的指南。

Answer 1

是的你可以。就用这条粗鲁的规则吧。

ion-icon {
&[class*="[your-custom-icons-prefix]"] {
    mask-size: contain;
    mask-position: 50% 50%;
    mask-repeat: no-repeat;
    background: currentColor;
    width: 1em;
    height: 1em;
}
&[class*="[your-custom-icons-prefix]-[your-icon-name]"] {
    mask-image: url(../assets/svgs/[icon_svg_file].svg);
}
}

您必须下载svg文件，并将其放在一个专用文件夹中，即assets/svgs/。然后使用您的自定义svg图标，如下所示：

 <ion-icon name="[your-custom-icons-prefix]-[your-icon-name]"></ion-icon>

Answer 2

您可以在index.html的头部包含material-design-iconic font的CDN

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/material-design-iconic-font/2.2.0/css/material-design-iconic-font.min.css">

然后你可以这样使用图标：

<i class="zmdi zmdi-flower-alt"></i>

Link to material-design-iconic-font oficial page