Material Symbols Setup

Switching to Material Symbols is completely optional.

This page assumes you have gone through the initial installation steps and would like to use Material Symbols throughout the app.

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:

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 just searches all the included files for MaterialSymbol components and extracts the material symbol name from the name prop.

npm install -D @react-md/vite-material-symbols-plugin

pnpm add -D @react-md/vite-material-symbols-plugin

yarn add -D @react-md/vite-material-symbols-plugin

vite.config.ts

 import { resolve } from 'node:path'
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react-swc'
+import { materialSymbolsPlugin } from "@react-md/vite-material-symbols-plugin";

 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [react(), materialSymbolsPlugin()],
   resolve: {
     alias: {
       everything: resolve(import.meta.dirname, 'src/_everything.scss'),
     },
   },
 })

See the configuration for additional plugin options.