@vinicio328/material-symbols

Material Symbols converted to React SvgIcon components, compatible with MUI (Material-UI).

This package provides Google Material Symbols as React components, similar to how @mui/icons-material provides Material Icons.

Installation

npm install @vinicio328/material-symbols @mui/material @emotion/react @emotion/styled

Usage

import HomeOutlined from '@vinicio328/material-symbols/HomeOutlined';
import HomeRounded from '@vinicio328/material-symbols/HomeRounded';
import HomeSharp from '@vinicio328/material-symbols/HomeSharp';

// Or import multiple icons
import { HomeOutlined, SettingsRounded, SearchSharp } from '@vinicio328/material-symbols';

function App() {
  return (
    <div>
      <HomeOutlined />
      <HomeRounded color="primary" />
      <HomeSharp fontSize="large" />
    </div>
  );
}

Icon Variants

Material Symbols come in three variants:

• Outlined - HomeOutlined, SettingsOutlined, etc.
• Rounded - HomeRounded, SettingsRounded, etc.
• Sharp - HomeSharp, SettingsSharp, etc.

Props

All icons accept the same props as MUI's SvgIcon component:

| Prop | Type | Default | Description | |------|------|---------|-------------| | color | 'inherit' \| 'action' \| 'disabled' \| 'primary' \| 'secondary' \| 'error' \| 'info' \| 'success' \| 'warning' | 'inherit' | The color of the icon | | fontSize | 'inherit' \| 'small' \| 'medium' \| 'large' | 'medium' | The font size applied to the icon | | sx | object | - | The system prop for custom styles |

Tree Shaking

This package supports tree shaking. When you import specific icons, only those icons will be included in your bundle:

// ✅ Good - only HomeOutlined is bundled
import HomeOutlined from '@vinicio328/material-symbols/HomeOutlined';

// ⚠️ Imports all icons - larger bundle size
import { HomeOutlined } from '@vinicio328/material-symbols';

Building from Source

To regenerate icons from the latest Material Symbols:

# Install dependencies
npm install

# Download latest icons and build
npm run generate

Development

# Download Material Symbols SVGs
npm run src:download

# Generate React components from SVGs
npm run src:icons

# Build ESM and CommonJS outputs
npm run build

License

MIT License - This package is provided under the MIT License.

The Material Symbols icons themselves are provided by Google under the Apache License 2.0.

Related

• Material Symbols - Google's official icon set
• @mui/icons-material - Material Icons for MUI
• Material Design Icons - Google's icon repository