chore: material symbols setup

mlaursen · mlaursen · commit 1dd438fc8f03 · 2026-02-09T16:50:59.000-05:00
diff --git a/apps/docs/src/app/(main)/(markdown)/(demos)/components/icon/layout.tsx b/apps/docs/src/app/(main)/(markdown)/(demos)/components/icon/layout.tsx
@@ -1,13 +1,15 @@
-import type { Metadata } from "next";
+import { type Metadata } from "next";
 import Script from "next/script.js";
 import { type PropsWithChildren, type ReactElement } from "react";
 
+import { EVERY_ICON_AND_SYMBOL_GOOGLE_FONT_URL } from "@/constants/googleFontsApi.js";
+
 export const metadata: Metadata = {
   icons: {
     other: [
       {
         rel: "stylesheet",
-        url: "https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&family=Material+Icons+Round&family=Material+Icons+Sharp&family=Material+Icons+Two+Tone&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block",
+        url: EVERY_ICON_AND_SYMBOL_GOOGLE_FONT_URL,
       },
     ],
   },
diff --git a/apps/docs/src/app/(main)/(markdown)/customization/material-symbols/page.mdx b/apps/docs/src/app/(main)/(markdown)/customization/material-symbols/page.mdx
@@ -16,6 +16,47 @@ keywords: [icon, symbol, material, fonts, google]
 
 ## Usage with [next.js]
 
+The easiest way to use Material Symbols with next.js is to create a list of
+used symbol names and add it to a layout's metadata:
+
+```diff src/app/layout.tsx
+ import { RootHtml } from "@react-md/core/RootHtml";
++import { getMaterialSymbolsUrl } from "@react-md/core/icon/getMaterialSymbolsUrl";
++import { type MaterialSymbolName } from "@react-md/core/icon/material";
++import { DEFAULT_MATERIAL_SYMBOL_NAMES } from "@react-md/core/icon/symbols";
+ import { type Metadata } from "next";
+ import { Roboto_Flex } from "next/font/google";
+ import { type ReactElement, type ReactNode } from "react";
+
+ import { RootProviders } from "@/components/RootProviders.js";
+
++const names = [
++  ...DEFAULT_MATERIAL_SYMBOL_NAMES,
++  "more_vert",
++  "light_mode",
++  "dark_mode",
++  "devices",
++  "code_off",
++  "deployed_code",
++  "code_blocks",
++  "markdown",
++  "content_copy",
++] satisfies readonly MaterialSymbolName[];
+
+ export const metadata: Metadata = {
+   title: "Your App Name",
++  icons: {
++    other: [
++      {
++        rel: "stylesheet",
++        url: getMaterialSymbolsUrl({ names }),
++      },
++    ],
++  },
+ };
+
+```
+
 ## Usage with [vite]
 
 A simple vite plugin can be installed and added to the `vite.config.ts` that
diff --git a/apps/docs/src/app/(main)/components/material-icons-and-symbols/MaterialSymbolStylesheets.tsx b/apps/docs/src/app/(main)/components/material-icons-and-symbols/MaterialSymbolStylesheets.tsx
@@ -1,21 +1,38 @@
+import { getMaterialSymbolsUrl } from "@react-md/core/icon/getMaterialSymbolsUrl";
+import {
+  type MaterialIconFamily,
+  type MaterialSymbolFamily,
+} from "@react-md/core/icon/material";
 import { Typography } from "@react-md/core/typography/Typography";
 import { type ReactElement } from "react";
 
 import { CopyCode } from "./CopyCode.js";
 import { useMaterialIconsAndSymbols } from "./MaterialIconsAndSymbolsProvider.js";
-import { getFontStylesheet } from "./utils.js";
+
+function assertSymbol(
+  iconFamily: MaterialIconFamily
+): asserts iconFamily is MaterialSymbolFamily {
+  if (iconFamily === "filled" || iconFamily === "two-tone") {
+    throw new Error("Invalid MaterialSymbol family");
+  }
+}
 
 export function MaterialSymbolStylesheets(): ReactElement {
   const { iconFamily, fill, grade, weight, opticalSize } =
     useMaterialIconsAndSymbols();
 
-  const variableHref = getFontStylesheet({
-    iconType: "symbol",
-    iconFamily,
+  assertSymbol(iconFamily);
+  const variableHref = getMaterialSymbolsUrl({
+    names: [],
+    family: iconFamily,
+    fill: { min: 0, max: 1 },
+    grade: { min: -25, max: 200 },
+    opticalSize: { min: 20, max: 48 },
+    weight: { min: 100, max: 700 },
   });
-  const staticHref = getFontStylesheet({
-    iconType: "symbol",
-    iconFamily,
+  const staticHref = getMaterialSymbolsUrl({
+    names: [],
+    family: iconFamily,
     fill,
     weight,
     grade,
diff --git a/apps/docs/src/app/(main)/components/material-icons-and-symbols/layout.tsx b/apps/docs/src/app/(main)/components/material-icons-and-symbols/layout.tsx
@@ -1,6 +1,8 @@
 import { type Metadata } from "next";
 import { type PropsWithChildren, type ReactElement } from "react";
 
+import { EVERY_ICON_AND_SYMBOL_GOOGLE_FONT_URL } from "@/constants/googleFontsApi.js";
+
 const title = "Material icons and Symbols - react-md";
 const description =
   "This page is used to help find icons available in react-md using Material Symbols or Material Icons svg components. Icons can be filtered by type, group, or name.";
@@ -22,7 +24,7 @@ export const metadata: Metadata = {
     other: [
       {
         rel: "stylesheet",
-        url: "https://fonts.googleapis.com/css2?family=Material+Icons&family=Material+Icons+Outlined&family=Material+Icons+Round&family=Material+Icons+Sharp&family=Material+Icons+Two+Tone&family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200",
+        url: EVERY_ICON_AND_SYMBOL_GOOGLE_FONT_URL,
       },
     ],
   },
diff --git a/apps/docs/src/app/(main)/components/material-icons-and-symbols/utils.ts b/apps/docs/src/app/(main)/components/material-icons-and-symbols/utils.ts
@@ -101,47 +101,27 @@ export function getMaterialIconComponentName(
   return pascalCase(`${iconName}${suffix}`);
 }
 
-type DefinedSpecs = Omit<MaterialSymbolConfiguration, "family">;
-
 interface FontStylesheetOptions {
   iconType: IconType;
   iconFamily: MaterialIconFamily;
 }
 
-export function getFontStylesheet(options: FontStylesheetOptions): string;
-export function getFontStylesheet(
-  options: FontStylesheetOptions & DefinedSpecs
-): string;
-export function getFontStylesheet(
-  options: FontStylesheetOptions & Partial<DefinedSpecs>
-): string {
-  const {
-    iconType,
-    iconFamily,
-    opticalSize = "20..48",
-    weight = "100..700",
-    fill = "0..1",
-    grade = "-50..200",
-  } = options;
-
-  let specs = "";
+export function getFontStylesheet(options: FontStylesheetOptions): string {
+  const { iconType, iconFamily } = options;
+
   let familyName = iconFamily
     .split("-")
     .map((part) => upperFirst(part))
     .join("+");
 
-  if (isMaterialIconType(iconType)) {
-    if (familyName === "Rounded") {
-      familyName = "Round";
-    } else if (familyName === "Filled") {
-      familyName = "";
-    }
-  } else {
-    specs = `:opsz,wght,FILL,GRAD@${opticalSize},${weight},${fill},${grade}`;
+  if (familyName === "Rounded") {
+    familyName = "Round";
+  } else if (familyName === "Filled") {
+    familyName = "";
   }
 
   const name = upperFirst(iconType.split("-")[0]);
-  const suffix = `${name}s${familyName ? `+${familyName}` : ""}${specs}`;
+  const suffix = `${name}s${familyName ? `+${familyName}` : ""}`;
 
   return `https://fonts.googleapis.com/css2?family=Material+${suffix}`;
 }
diff --git a/apps/docs/src/components/CustomMdxComponents.tsx b/apps/docs/src/components/CustomMdxComponents.tsx
@@ -103,8 +103,12 @@ export const CUSTOM_MDX_COMPONENTS: CustomMDXComponents = {
   tbody: TableBody,
   tfoot: TableFooter,
   tr: TableRow,
-  td: TableCell,
-  th: TableCell,
+  td: function Td(props) {
+    return <TableCell lineWrap padding="vertical" {...props} />;
+  },
+  th: function Th(props) {
+    return <TableCell lineWrap padding="vertical" {...props} />;
+  },
   // table: ({ children }) => (
   //   <div className={tableContainer()}>
   //     <table className={table({ fullWidth: true })}>{children}</table>
diff --git a/apps/docs/src/constants/googleFontsApi.ts b/apps/docs/src/constants/googleFontsApi.ts
@@ -0,0 +1,20 @@
+import { getMaterialSymbolsUrl } from "@react-md/core/icon/getMaterialSymbolsUrl";
+
+const families = [
+  "Material+Icons",
+  "Material+Icons+Outlined",
+  "Material+Icons+Round",
+  "Material+Icons+Sharp",
+  "Material+Icons+Two+Tone",
+]
+  .map((name) => `family=${name}`)
+  .join("&");
+
+export const EVERY_ICON_AND_SYMBOL_GOOGLE_FONT_URL = getMaterialSymbolsUrl({
+  names: [],
+  family: ["outlined", "rounded", "sharp"],
+  fill: { min: 0, max: 1 },
+  grade: { min: -25, max: 200 },
+  opticalSize: { min: 20, max: 48 },
+  weight: { min: 100, max: 700 },
+}).replace("?family", `?${families}&family`);
diff --git a/apps/next-playground/src/app/layout.tsx b/apps/next-playground/src/app/layout.tsx
@@ -1,5 +1,5 @@
 import { RootHtml } from "@react-md/core/RootHtml";
-import { MaterialSymbolsLinks } from "@react-md/core/icon/MaterialSymbolsLinks";
+import { getMaterialSymbolsUrl } from "@react-md/core/icon/getMaterialSymbolsUrl";
 import { type MaterialSymbolName } from "@react-md/core/icon/material";
 import { DEFAULT_MATERIAL_SYMBOL_NAMES } from "@react-md/core/icon/symbols";
 import { type Metadata } from "next";
@@ -34,6 +34,14 @@ const names = [
 
 export const metadata: Metadata = {
   title: "Next Playground - react-md",
+  icons: {
+    other: [
+      {
+        rel: "stylesheet",
+        url: getMaterialSymbolsUrl({ names }),
+      },
+    ],
+  },
 };
 
 // TODO: Add this to main docs and maybe some components to automate it. should
@@ -59,7 +67,6 @@ export default function Layout({ children }: LayoutProps): ReactElement {
       beforeBodyChildren={
         <head>
           <script dangerouslySetInnerHTML={{ __html: THEME_SCRIPT }} />
-          <MaterialSymbolsLinks names={names} />
         </head>
       }
     >
diff --git a/packages/core/src/icon/MaterialSymbolsLinks.tsx b/packages/core/src/icon/MaterialSymbolsLinks.tsx
diff --git a/packages/core/src/icon/__tests__/MaterialSymbolsLinks.tsx b/packages/core/src/icon/__tests__/MaterialSymbolsLinks.tsx
diff --git a/packages/core/src/icon/__tests__/getMaterialSymbolsUrl.ts b/packages/core/src/icon/__tests__/getMaterialSymbolsUrl.ts
diff --git a/packages/core/src/icon/getMaterialSymbolsUrl.ts b/packages/core/src/icon/getMaterialSymbolsUrl.ts
