How to use Material Icons with next.js?

Question

import Link from 'next/link';
import MaterialIcon from 'material-icons-react';

const Header = (props) => {
  return (
    <nav>
      <ul>
        {navOptions.map(nav => (
          <li>
            <Link href={nav.url}>
              <a>
                <MaterialIcon icon={nav.icon} />
                <span key={nav.icon}>{nav.name}</span>
              </a>
            </Link>
          </li>
        ))}
      </ul>
    </nav>
  )
}

export default Header;

The above code generates the following error:

It seems to me I need a tracker, but I can’t quite figure out which one.

Answer 1

You’ll need the Oader @Zeit/next-css

npm install --save @zeit/next-css

Create a next.config.js file (without CSS Modules)

// next.config.js
const withCSS = require('@zeit/next-css')
module.exports = withCSS()

More information:

https://github.com/zeit/next-plugins/tree/master/packages/next-css