Material Design Icons for Home Assistant custom card development.

npm install @mibu/ha-mdi

The Home Assistant frontend bundles the latest MDI with older icons that were removed. Custom cards can use these icons by providing an icon identifier: <icon-collection>:<icon-name> (e.g. mdi:home-assistant).

This library provides these identifiers and also the SVG paths as an alternative.

Usage

Javascript:

import { mdiHomeAssistant } from '@mibu/ha-mdi'; // Icon identifier
import { mdiHomeAutomation } from '@mibu/ha-mdi/path'; // SVG path

console.log(mdiHomeAssistant); // mdi:home-assistant
console.log(mdiHomeAutomation); // M12,3L2,12H5V20H19V12...

Svelte:

<script>
  import { mdiHomeAssistant } from '@mibu/ha-mdi';
  import { mdiHomeAutomation } from '@mibu/ha-mdi/path';
</script>

<ha-icon icon={mdiHomeAssistant}/>
<ha-svg-icon path={mdiHomeAutomation}/>

Related

• Home Assistant Frontend
• Material Design Icons - SVG