How to add material-symbols to the project? — Costs & pitfalls — How to ship it

penguin_pam

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...

Originally asked by Roman Mahotskyi on Stack Exchange (stackoverflow) (CC BY-SA 4.0).

Variant 548.

Variant 7527.

uphilltech

Great question — answering as the UphillTech team:

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...

Full answer by matt: https://stackoverflow.stackexchange.com/a/76901714 (CC BY-SA 4.0).

Want it for your business? UphillTech.