svelte-material-symbols

A Svelte library for displaying Google Material Symbols as SVG icons.

Features

• Lightweight: No font files required, dynamically loads only the SVGs you need
• Dark Mode Support: Automatically detects system settings and switches colors
• Layout Stable: Prevents layout shifts during icon loading
• Highly Customizable: Supports all Material Symbols options

Installation

npm install @noughts/svelte-material-symbols

Basic Usage

<script>
  import { MaterialSymbol } from '@noughts/svelte-material-symbols';
</script>

<!-- Basic usage -->
<MaterialSymbol icon="home" />

<!-- Customized icon -->
<MaterialSymbol icon="star" fill color="gold" size={32} />

Properties

Property	Type	Default	Description
icon	string	Required	Icon name to display
fill	boolean	false	Whether to fill the icon
weight	number	400	Font weight (200-700)
grade	-25 | 0 | 200	0	Grade adjustment
opticalSize	20 | 24 | 40 | 48	24	Optical size
color	string	"#000000"	Color in light mode
darkColor	string	value of color	Color in dark mode
opacity	number	1	Opacity (0-1)
size	number | undefined	undefined	Size in pixels (defaults to 1em if unspecified)

Usage Examples

Basic Icons

<MaterialSymbol icon="check_circle" />
<MaterialSymbol icon="favorite" fill />
<MaterialSymbol icon="settings" weight={700} />

Color and Size Customization

<MaterialSymbol icon="star" color="orange" size={48} />
<MaterialSymbol icon="error" color="red" size={24} />

Dark Mode Support

<!-- Black in light mode, white in dark mode -->
<MaterialSymbol icon="brightness_6" color="#333333" darkColor="#eeeeee" />

Using in Buttons

<button>
  <MaterialSymbol icon="add" />
  Add Item
</button>

Star Rating Implementation

<div class="rating">
  <MaterialSymbol icon="star" fill color="gold" />
  <MaterialSymbol icon="star" fill color="gold" />
  <MaterialSymbol icon="star" fill color="gold" />
  <MaterialSymbol icon="star" color="gold" />
  <MaterialSymbol icon="star" color="gold" />
</div>

Available Icons

All icons provided by Google Material Symbols are available. You can find icon names on the Material Symbols official site.

Examples: home, star, favorite, settings, menu, search, add, delete, edit, check, close, etc.

Technical Details

SVG Loading Method

This library loads SVG files directly from the official Google Material Design Icons GitHub repository. It uses CSS mask to colorize SVGs with background colors, enabling lightweight and flexible color changes.

Dark Mode Detection

Uses the prefers-color-scheme: dark media query to automatically detect system dark mode settings and apply appropriate colors.

Development

Start Development Server

npm run dev

Build Library

npm run package

Build for Production

npm run build

License

This project is released under the MIT License.