MUI Material Symbols 400 outlined

This package contains Material Symbols as Material UI SvgIcon components.

• Style: outlined
• Weight: 400
• Source: MUI Material Symbols

Getting Started

Install this package in a project that already uses React and Material UI:

npm install @aivot/mui-material-symbols-400-outlined

Usage

Use direct imports:

import Spa from '@aivot/mui-material-symbols-400-outlined/Spa';
import SpaFilled from '@aivot/mui-material-symbols-400-outlined/SpaFilled';

function MyComponent() {
  return (
    <div>
      <Spa />
      <SpaFilled color="primary" />
    </div>
  );
}

The components accept the normal Material UI SvgIcon props:

<Spa color="primary" fontSize="small" titleAccess="Spa" />

Each icon exports the same public component type as Material UI's SvgIcon, so it can be used where a MUI icon component is expected.

Root imports are intentionally not exposed. Use direct icon imports so bundlers only load the symbols you reference.

Direct imports are supported by modern TypeScript resolvers and by classic moduleResolution: "node".

The component names are derived from the official Material Symbols slugs. They do not include an Icon suffix, but you may choose one locally:

import SpaIcon from '@aivot/mui-material-symbols-400-outlined/Spa';