How to add material-symbols to the Next.js project?

Question

I use Next.js v13.2. I want to add material-symbols to my project.

I want to use it like

<span className="material-symbols-rounded">face</span>

I found that Next.JS replaced head.js file with Metadata but I can't find how to add CDNs. Previously I used it like this (but it didn't work correctly. On refresh it rendered icon name instead of icon itself)

// app/head.tsx
export default function Head(): JSX.Element {
  return (
    <>
      <title>Project Name</title>
      <link
        href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&display=optional"
        precedence="default"
        rel="stylesheet"
        precedence
      />
  )
}

How can I do this?

Answer 1

Use the npm package: material-symbols

This does all the legwork in importing Material Symbols as a font and setting up the CSS, and gives us flexibility in how we import it.

The README has much more detailed usage info, but I think in your case (using Next.js), you'd want to either:

• Import it globally in JS in the _app.tsx file:

  import "material-symbols";
  

• Import it in SCSS in a global style file (e.g. styles/globals.scss):

  @import "material-symbols";
  

• Preferred: Import is as-needed in the modular SCSS files for each component:

  // ExampleComponent.module.scss
  @import "material-symbols";
  
  ...
  

  // ExampleComponent.tsx
  import style from "./Example.module.scss";
  
  ...
  
  <span className={style["material-symbols-rounded"]}>face</span>
  

I prefer the last approach because it sets you up for when you need to modify the default styling. For example:

// ExampleComponent.module.scss
...

// Modify imported material-symbols style
.material-symbols-rounded {
  font-size: theme.$medium-symbol;
}