{"id":22397218,"url":"https://github.com/robintail/vite-plugin-material-symbols","last_synced_at":"2025-10-15T16:30:26.273Z","repository":{"id":265685188,"uuid":"896473685","full_name":"RobinTail/vite-plugin-material-symbols","owner":"RobinTail","description":"Selective loading of Material Symbols for production","archived":false,"fork":false,"pushed_at":"2024-12-31T06:35:43.000Z","size":267,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-01-30T07:05:47.424Z","etag":null,"topics":["css","font","font-icons","frontend","html","icon","icons","material-design","material-ui","rollup","style","svg-icons","symbols","vite","vitejs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vite-plugin-material-symbols","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/RobinTail.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"RobinTail","buy_me_a_coffee":"robintail"}},"created_at":"2024-11-30T13:09:52.000Z","updated_at":"2024-12-31T06:35:45.000Z","dependencies_parsed_at":"2024-11-30T14:31:52.611Z","dependency_job_id":"e84bc448-9d90-400a-93a1-0e8d84ba128d","html_url":"https://github.com/RobinTail/vite-plugin-material-symbols","commit_stats":null,"previous_names":["robintail/vite-plugin-material-symbols"],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinTail%2Fvite-plugin-material-symbols","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinTail%2Fvite-plugin-material-symbols/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinTail%2Fvite-plugin-material-symbols/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/RobinTail%2Fvite-plugin-material-symbols/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/RobinTail","download_url":"https://codeload.github.com/RobinTail/vite-plugin-material-symbols/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":236619829,"owners_count":19178214,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","font","font-icons","frontend","html","icon","icons","material-design","material-ui","rollup","style","svg-icons","symbols","vite","vitejs"],"created_at":"2024-12-05T06:11:54.163Z","updated_at":"2025-10-15T16:30:26.268Z","avatar_url":"https://github.com/RobinTail.png","language":"TypeScript","funding_links":["https://github.com/sponsors/RobinTail","https://buymeacoffee.com/robintail"],"categories":[],"sub_categories":[],"readme":"# vite-plugin-material-symbols\n\n![License](https://img.shields.io/github/license/robintail/vite-plugin-material-symbols)\n[![coverage](https://coveralls.io/repos/github/RobinTail/vite-plugin-material-symbols/badge.svg?branch=main\u0026)](https://coveralls.io/github/RobinTail/vite-plugin-material-symbols?branch=main)\n![Downloads](https://img.shields.io/npm/dw/vite-plugin-material-symbols)\n\n[Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) is a font-based alternative to SVG icons.\nCompared to [Material Icons](https://www.npmjs.com/package/@mui/icons-material), which are packed into a bundle,\nthereby increasing its size, font-based symbols are loaded on the user side upon request.\n\nHowever, the difficulty is that they are either loaded all at once, which is also quite a large volume, or it is\nnecessary to specify a list of `icon_names` for filtering the font, which must also be sorted. Therefore, it is\nnecessary to maintain the list of icons used within the application.\n\nThe plugin automates that job by determining which icons are used in the source code of the application and during the\nbuild substitutes that list into `index.html` for selective download from Google Font CDN, thus reducing the volume of\nthe font downloaded by the user.\n\n## Requirements\n\n- Node.js `^20 || ^22 || ^24`;\n- Vite `^6 || ^7`.\n\n## Installation\n\nInstall the plugin using your favourite package manager, for example:\n\n```shell\nyarn add -D vite-plugin-material-symbols\n```\n\nAdd it to the Vite configuration:\n\n```ts\n// vite.config.ts\nimport { defineConfig } from \"vite\";\nimport react from \"@vitejs/plugin-react-swc\";\nimport materialSymbols from \"vite-plugin-material-symbols\";\n\nexport default defineConfig({\n  plugins: [react(), materialSymbols()],\n});\n```\n\nEnsure having `\u003chead\u003e` tag in your `index.html`.\n\nEnsure assigning the [required](https://developers.google.com/fonts/docs/material_symbols) `className` to your icons.\nWhen using Material UI it can be [globally configured](https://mui.com/material-ui/customization/theme-components/):\n\n```ts\nconst theme = createTheme({\n  components: {\n    MuiIcon: {\n      defaultProps: {\n        /* @see https://fonts.google.com/icons?icon.set=Material+Symbols */\n        className: \"material-symbols-outlined\", // or -rounded or -sharp\n      },\n    },\n  },\n});\n```\n\n## Usage\n\nConsider a sample React component using MUI Icon:\n\n```tsx\nimport Stack from \"@mui/material/Stack\";\nimport Icon from \"@mui/material/Icon\";\n\nconst Component = () =\u003e (\n  \u003cStack gap={2}\u003e\n    \u003cIcon\u003ehome\u003c/Icon\u003e\n    \u003cIcon\u003echevron_right\u003c/Icon\u003e\n    \u003cIcon\u003ecomment\u003c/Icon\u003e\n  \u003c/Stack\u003e\n);\n```\n\nAfter running `vite build`, the `\u003clink\u003e` tag will be added to your `index.html` having the list of required icon names:\n\n```html\n\u003clink\n  href=\"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\u0026icon_names=chevron_right,comment,home\"\n  rel=\"stylesheet\"\n/\u003e\n```\n\n## Limitations\n\nThe plugin substitutes the `icon_names` URL parameter **ONLY** in `vite build` mode. In `vite dev` (serve) mode\n`index.html` is transformed before the application source code, so that all Material Symbols are loaded.\n\n## Configuration\n\nThe plugin accepts an object of the following options:\n\n```yaml\ncomponent:\n  type: string\n  description: The name of JSX component to obtain the icon names from\n  default: Icon\ngetUrl:\n  type: function\n  description: Material Symbols CSS Provider\n  arguments: [string] # icon_names parameter\n  exampleArguments: [\"icon_names=chevron_right,comment,home\"] # can be empty string\n  returns: string # the URL\n  default: (iconNamesParam) =\u003e `https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0\u0026${iconNamesParam}`\npreload:\n  type: boolean\n  description: Enables higher priority for loading symbols\n  default: false\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobintail%2Fvite-plugin-material-symbols","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frobintail%2Fvite-plugin-material-symbols","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frobintail%2Fvite-plugin-material-symbols/lists"}