Svelte - Material Design Icons

Using Material Design Icons in your Svelte projects.

npm install mdi-svelte --save-dev

Demo

Go to Demo page.

Usage

The example below uses the @mdi/js package which contains all the MDI icon's path data.

<script>
    import Icon from 'mdi-svelte';
    import { mdiCardsSpade } from '@mdi/js';
</script>

<Icon path={mdiCardsSpade} color="black" />

You can find icons names at materialdesignicons.com

Props

Prop	PropTypes	Default	Details
path	string	required	SVG path data. Usually from @mdi/js
size	number, string	null	{size * 1.5}rem, 1em, 48px
flip	bool, string	false	h - flip horizontal, v - vertical, true - both
rotate	number	0	degrees -360 to 360
color	string	color of the text	rgb() / rgba() / #000
spin	bool, number	false	true = 2s, -2 counterclockwise, {spin}s

Inspiration

NPM @MDI Organization @MDI/React module