材质图标 cdn 在 next.js 中不起作用

编程问答 2022-05-24

问题描述

我将 cdn 添加到 next.js head 部分，但它不起作用。

import Head from "next/head";

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

我试图渲染这个简单的图标，但它没有显示任何图标。它只是简单地显示字符串“add”

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

解决方法

我发现的解决方法是使用代码点而不是图标名称：

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