Mdi Svelte

Svelte component for Material Design Icons

Want a Svelte site built?

Using Material Design Icons in your Svelte projects.

npm install mdi-svelte --save-dev

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

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`