Nextjs Icons

Through most of the examples in this kit, we have used the default Icons for the Material Design provided by Google.

Icons font

In order to use the font Icon component, or to use icon names (ligatures) directly in components that support them, you must first add the Material icons font. Here are some instructions on how to do so.

You would use them like:

<i className="material-icons">name_of_the_icon</i>

or you could use them with material-ui like so:

import Icon from "@material-ui/core/Icon";

<Icon>name_of_the_icon</Icon>

SVG Icons

In order to use prebuilt SVG Material icons, such as those found in the component demos you must first install the @material-ui/icons package:

npm i -E @material-ui/icons

Then you would use them like so:

import NameOfTheIcon from '@material-ui/icons/NameOfTheIcon';

<NameOfTheIcon />

Please do not forget to take a look at the Quick Start guides as well