Icons

The Icon component allows to provide visual context to various aspects of your application. It is iconset agnostic, so you can use any icon from any vendor you like.

It's best to use a library which just exports SVG path data, instead of a webfont.

We recommend the @mdi/js library: npm install @mdi/js See: Material Design Icons.

Playground

Icons come in two themes (light and dark), and can have any size.

size

icon

color

API

Icon

Examples

Below is a collection of simple to complex examples.

Icon Size and Spinning

You can specify icon size and if the icon should spin.

Color

Using color helpers you can change the color of an icon from the standard dark and light themes.

Icon Font File

If you really need to, you can easily use Icon font files instead of SVGs. For example, with mdi or fa webfonts:

<div class="d-flex justify-space-between">
  <Icon class="mdi mdi-home" />
  <Icon spin class="mdi mdi-refresh" />
  <Icon class="fa fa-award" />
  <Icon class="fa fa-camera" />
</div>

(We haven’t imported these font files, because the site would get bloated by them.)

Disabled

Disable the icon using the disabled prop.

Ready For More?

Continue to learn more about svelte materialify with content selected by the creator.

Edit This Page on GitHub

Last Updated: 2022-10-03