how to use google material icons as class instead of <i> tag

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";
}

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.