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.

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


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




Below is a collection of simple to complex examples.

Icon Size and Spinning

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


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" />

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


Disable the icon using the disabled prop.

Ready For More?

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

Last Updated: 2022-10-03