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,GRAD@20..48,100..700,0..1,-50..200&display=optional"
        precedence="default"
        rel="stylesheet"
        precedence
      />
  )
}

How can I do this?

score 0 · Answer 1 · answered Aug 14 '23 at 19:35

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;
}

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

1 Answers1