how to use google material icons as class instead of tag

Question

According to the guideline in the Google Material website we have to use material icons in _i _ tag.

the question is how to add the icons as font-awesome. something like :

Class="material-icons face"

instead of

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

I know this is 4 years ago and that my answer is a bit out of topic (since it doesn't use a `class` attribute) but just in case it will help anyone in the future, here it goes. If you just replace `` with ``, it works. For example, ` face ` — padawanTony, Sep 30 '20 at 08:58

score 14 · Accepted Answer · answered Aug 16 '16 at 05:38

14

Yes,you can add the material icons as classes using the after pseudo elements.check out the fiddle

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

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

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

answered Aug 16 '16 at 05:38

Vivekraj K R

2,418
2
19
38

score 11 · Answer 2 · answered May 07 '20 at 13:36

There's an easier way than the accepted answer. I got inspiration for this from the plugin css-toolip, which utilises the attr() css function (surprisingly has high browser adoption).

While attr() is supported for effectively all browsers for the content property... https://caniuse.com/#search=css%20attr

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

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

This means that you don't have to add css for each icon that you want to use.

score 0 · Answer 3 · answered Dec 26 '21 at 13:21

0

You can use IcoMoon (an outstanding free tool to generate fonts). Set class, prefix/suffix etc to adjust then you can easily add icons by <i class="m-home"></i>

answered Dec 26 '21 at 13:21

Alo

53
6

score 0 · Answer 4 · answered Mar 07 '22 at 10:11

It's also possible to create the selectors with Sass, if someone don't want to use data selectors.

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

how to use google material icons as class instead of tag

4 Answers4

Linked