Material Icons

Fontsource does support all the variations of Material Icons. More details on how to use the font variation of the project can be found here.


Install the font as usual like any other Fontsource package using the package manager of your choice, then import the project.

import "@fontsource/material-icons";
import "@fontsource/material-icons-rounded";
import "@fontsource/material-icons-outlined";
import "@fontsource/material-icons-sharp";
import "@fontsource/material-icons-two-tone";

Within the CSS files included in the import is the .material-icons class which contains all the necessary rules to render the icons.

To then incorporate it into your web page, all you need to do is specify it in your HTML.

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