@damisparks/material-symbols

@damisparks/material-symbols includes the 2100+ Material Symbols Rounded icons from Google Fonts converted to SvgIcon components for seamless integration with Material UI applications.

Installation

To install in an existing Node.js, React, and Material UI project:

1. Install Node.js and npm versions according to the Requirements.

2. Install the @damisparks/material-symbols package using your preferred package manager. Using pnpm:

   pnpm add @damisparks/material-symbols

Usage

The package doesn't have a main index module, so use deep imports (using the file extension .mjs) from the ECMAScript modules that are exported via the package.json field exports:

• icons/material-symbols: Modules each named IconMaterialSymbols + the Google Material Symbols icon name in pascal case + Fill (optionally, if the icon has a fill variant) or OutlineRounded (optionally, if the icon has a rounded variant) + .mjs, default exporting a React component implementing the Material UI component SvgIcon. Example:

  import MaterialSymbolsIconKeyboardArrowDownOutlineRounded from "@damisparks/material-symbols/icons/material-symbols/MaterialSymbolsIconKeyboardArrowDownOutlineRounded.mjs";

Requirements

Supported runtime environments:

• Node.js versions ^18.18.0 || ^20.9.0 || >=22.0.0.
• Browsers matching the Browserslist query > 0.5%, not OperaMini all, not dead.

Supported TypeScript versions: v5+.

[!WARNING] While this package has correct ESM for Node.js and TypeScript, the Material UI dependencies don’t. Until this is fixed upstream, instead of the correct TypeScript config of compilerOptions.module set to "nodenext", projects must set "preserve", and must use a bundler (e.g. esbuild or webpack) to consume this package as Node.js and browsers can’t run it directly. Bundlers have to be specially configured to be able to resolve the non standard ESM dependencies.

Scripts

These CLI scripts are used to install, build, serve, and quality check the project.

Install script

To install dependencies:

pnpm install

Prepare script

To prepare build artifacts so the repo can be used as an installed package:

pnpm prepare

This npm life cycle script is automatically used by the npm CLI in certain situations and isn’t for manual use (instead see Build script). It allows the @damisparks/material-symbols package to be installed in a project via a Git repo URL; useful for testing forks or PR branches.

Build script

To build the project:

pnpm build

Check script

To check the project for linting errors and formatting issues:

pnpm check

ESLint script

To run ESLint:

pnpm lint

Type check script

To type check the project:

pnpm typecheck