That seems a bit too complex but it's a great idea.

Copying my response from the MUI repo:

You can use the codepoints instead (optimally the library would do the transformation):

Screen.Recording.2023-12-07.at.12.18.11.mov

There's some CLS in my video, but there are ways to fix that with a fallback font as well.

I'd like to have fonts over SVG because of the animations, but I'm worried about the 2MB file size if all variants are included (even the 300KB baseline is a lot). Creating an optimized font file at build-time based on whatever icons you imported would be the optimal solution, but that sounds more like a bundler plug-in than a MUI component.

Next would be in the optimal position to make a bundler plug-in like that, so maybe?

Thanks for the correction, @Gopikrishna19. I simplified a lot my original code to put here, but forgot to double-check.

thanks @luanmm, this is a really neat solution, I appreciate you sharing.

I'm adding a little note that in my implementation, I had to import LocalFont from 'next/font/local' instead of '@next/font/local'. Honestly, i don't know a lot about how es6 modules, so maybe theres a good reason for that, but I figured I'd share.

In newer Next versions (since 13.2, as stated in release notes), the "correct" way to do it is from next package, indeed. I will update the import in my sample.

Thanks for adding this, @dallinmoak! Best regards.

NB for future readers:
this solution relies on the whole font, which currently weights more than 3.5Mb (https://github.com/marella/material-symbols/blob/main/material-symbols/material-symbols-rounded.woff2), so approximately the same as the alternative described in the original post.

See #42881 (reply in thread) for a performance-focused alternative.

Just to note: this alternative solution may compromise some accessibility features (like ligatures, for instance). Performance can be a point, but web fonts are used (and encouraged by Google in Material Symbols) for a reason. So, in fact, the "best solution" should yet to be considered (maybe Next team has more experience than we do to make a decision here).

This is starting to look more and more like a publishable package!

Nice solution @drilens! Do you have any idea how to use this Icon within a client side component, I am really struggling with that at the moment :(

^i confirm i had this problem too in a side-project, but didn't solve it yet

Would it work to create a server-side API route to fetch the font data, then make an API request from the client component to that route?

Mhm interesting choice, was thinking about this as well... The only downside is that you see no icon while loading :(

https://twitter.com/Riyaadh_Abr/status/1681336073119490048

Bless you. It's Christmas early!!!

The only thing I will say about it is that with my other way i am able to adjust everything about it with tailwind classes

I put this is a css file and then imported that into my root layout. The downside of this is that I can only choose a single icon set. In my case I chose outlined

@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-outlined {
font-variation-settings: 'FILL' 0, 'GRAD' 0, 'opsz' 24;
}

but wouldn't it mean I just download the entire font?
Why is this preferred? I mean it would download entire font icons no? regadless of which glyphs i choose to use in each page

And if you want to add type checking for auto-completion of icon names:

// ./scripts/generateIconNames.js    > will generate ./scripts/out/iconNames.ts

const fs = require("node:fs")
let names = []

async function generateIconNames() {
  const res = await fetch(
    "https://raw.githubusercontent.com/google/material-design-icons/master/update/current_versions.json",
  )
  const icons = await res.json()

  for (const icon in icons) {
    names.push(icon.replace(/.*::/i, ""))
  }

  names = Array.from(new Set(names.sort())) // remove duplicates + sort

  const dir = __dirname + "/out"

  const content = `export const iconNames = ${JSON.stringify(names)} as const`

  fs.mkdir(dir, { recursive: true }, (err) => {
    if (err) throw err
  })

  fs.writeFile(dir + "/iconNames.ts", content, (err) => {
    if (err) {
      console.error(err)
    } else {
      console.log(
        "\x1b[32m%s\x1b[0m",
        `✔ ${names.length} icon names generated\n`,
      )
    }
  })
}

generateIconNames()

// the generated ./scripts/out/iconNames.ts contains the icon names:

export const iconNames = ["123","3d_rotation","abc"...] as const

And then use it in a component like that:

// ./components/Icon.tsx

import { iconNames } from "@/scripts/out/iconNames"
import { twMerge } from "tailwind-merge"

type IconProps = {
  name: (typeof iconNames)[number]
  className?: string
}

export default function Icon({ name, className, ...props }: IconProps) {
  return (
    <span className={twMerge("material-symbols-rounded", className)}>
      {name}
    </span>
  )
}

Thanks for sharing!! this worked! 🔥

I've been manually loading svg because it's better than showing the text of the font. I couldn't figure that out.