如何将Google Material Icons作为类(class)而非<i>标签(tag)来使用？

Question

根据Google Material网站的指南，我们必须在标签_i_中使用material图标。问题是如何像font-awesome一样添加这些图标，类似于：
Class="material-icons face" 而不是 <i class="material-icons"> face </i>

- Fakhruddin Abdi

---

我知道这是4年前的问题，我的回答有点离题（因为它没有使用class属性），但以防将来有人需要，我还是说一下。如果你只是用<span>替换<i>，它就可以工作了。例如，<span class="material-icons"> face </span>。 - padawanTony

Answer 1

是的，您可以使用after伪元素将材料图标添加为类。查看代码片段。

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

.face {
    position:relative;
    display:inline-block;
}

.face:after {
    content: "face";
}

- Vivekraj K R

Answer 2

有一个比接受答案更简单的方法。我从插件css-toolip中获得了灵感，该插件利用了attr() css函数（令人惊讶地被大多数浏览器采用）。

虽然对于内容属性，attr()在实际上所有浏览器中都得到支持... https://caniuse.com/#search=css%20attr

<span class="material-icons" data-icon="face"></span>

.material-icons:after {
    content: attr(data-icon);
}

这意味着你不必为想使用的每个图标添加CSS。

这意味着您无需针对要使用的每个图标添加CSS。

- Luke Madhanga

Answer 3

您可以使用IcoMoon（一个出色的免费工具来生成字体）。设置类、前缀/后缀等进行调整，然后您就可以通过<i class="m-home"></i>轻松添加图标了。

- Alo

Answer 4

如果有人不想使用数据选择器，也可以使用Sass创建选择器。

$icons: "content_paste_search", "format-size", "search";

@each $icon in $icons {
  .material-icons-#{$icon}:after {
    content: $icon;
  }
}

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

- ProV