material icons cdn is not working in next.js

user_10262805 0
Viewed 1933

I added cdn to next.js head section but it does not work.

import Head from "next/head";

<Head>
  <link
    href="https://fonts.googleapis.com/icon?family=Material+Icons"
    rel="stylesheet"
  ></link>
</Head>;

I tried to render this simple icon but it does not show any icon. it just simply shows string "add"

  <i className="material-icons">add</i>
google-material-icons next.js head cdn css
3 Answers

I came across the same problem and the following worked for me:

Add the Google Material Icon CSS to the globals.css file instead of the xxxx.module.css. After I did this, icon name worked

user_197987530

The workaround I found is to use Code point instead of the icon name:

<Head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" 
rel="stylesheet" />
</Head>
<span className="material-icons">&#xe145;</span>
user_32741720
user_60872130
Related