Material Design Light Icons

How to use Material Design Light Icons

Material Design Light Icons are available through Iconify, so you can drop them into React, Vue, Svelte, or plain HTML without downloading individual files. Pick the method that matches your stack below.

React

Install the Iconify React component:

npm install @iconify/react

Then import and use any Material Design Light Icons by its name:

import { Icon } from '@iconify/react';
              
export default function App() {
  return <Icon icon="mdi-light:[icon-name]" />;
}

Vue

Install the Iconify Vue component:

npm install @iconify/vue

Then register and use it in your component:

<script>
  import { Icon } from '@iconify/vue';
</script>

<template>
  <Icon icon="mdi-light:[icon-name]" />
</template>

Svelte

Install the Iconify Svelte component:

npm install @iconify/svelte

Then import and use it in your .svelte file:

<script>
  import IconifyIcon from '@iconify/svelte';
</script>

<IconifyIcon icon="mdi-light:[icon-name]" />

HTML

No installation needed — load the Iconify script from a CDN and reference icons directly in your markup:

<script src="https://cdn.jsdelivr.net/npm/iconify-icon@latest/dist/iconify-icon.min.js"></script>

<iconify-icon icon="mdi-light:[icon-name]" height="36"></iconify-icon>