JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 96
  • Score
    100M100P100Q67648F
  • License MIT

Selective loading of Material Symbols for production

Package Exports

  • vite-plugin-material-symbols

Readme

vite-plugin-material-symbols

coverage

The plugin determines which Material Symbols are used in JSX <Icon> tags and substitutes this list in index.html for selective download from Google CDN, thus reducing the volume of the font downloaded by the user.

Demo

Consider a sample React component using MUI Icon:

import Stack from "@mui/material/Stack";
import Icon from "@mui/material/Icon";

const Component = () => (
  <Stack gap={2}>
    <Icon>home</Icon>
    <Icon>chevron_right</Icon>
    <Icon>comment</Icon>
  </Stack>
);

And the Material Symbols linked within index.html having __MATERIAL_SYMBOLS__ placeholder:

<!doctype html>
<html lang="en">
  <head>
    <link
      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&__MATERIAL_SYMBOLS__"
      rel="stylesheet"
    />
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/index.tsx"></script>
  </body>
</html>

Configuring Vite to use the plugin:

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";
import materialSymbols from "vite-plugin-material-symbols";

export default defineConfig({
  plugins: [
    react(),
    materialSymbols({
      // these are defaults:
      component: "Icon",
      placeholder: "__MATERIAL_SYMBOLS__",
    }),
  ],
});

After running vite build, that link will have the substituted list of sorted icon names:

<link
  href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0&icon_names=chevron_right,comment,home"
  rel="stylesheet"
/>