Question

是否可以在Ionic项目中包含Google的Material desgin图标？

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

字体棒极了。

我找不到任何有关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文件，并将其放在专用文件夹中，即asset / 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

离子材料设计标志性字体

2 个答案: