A Better Site To Find MDI Icons for Home Assistant

If you use Home Assistant, then chances are that you are familiar with MDI, or materialdesignicons.com. I’ve always had a lot of issues with the MDI website. Speed being the #1 issue for me. On average, it takes 8+ seconds for the searched term to appear.

I stumbled across a really neat website that makes finding icons much more useful friendly, and thought I’d create a short post letting you know about it. It’s called https://mdi.bessarabov.com/

---

Using MaterialDesignIcons

To add a custom icon to an entity, you would either add mdi:database to the entity or icon: mdi:database to the YAML of the card.

---

Advantages of mdi.bessarabov.com

I’m quoting the creator of this site here, but he created this site as a way to find Material Design Icons easier.

After using it for a few days, I 100% agree with him and truly appreciate the work he’s put into the app.

• It’s extremely fast, as it uses static HTML files
• Mobile-friendly
• A page for each icon
• Includes a preview for the icon when you share the URL
• Excellent search functionality. Includes the name in the results.

---

A Quick Comparison

Just as a quick way to show you how both work, here is an example. I’m going to search for an icon to use in my Home Assistant Server Monitoring card.

MDI

It took 11 seconds for me to be able to click the “Search box”. Then another 5 seconds to load the results. It also doesn’t show the name of the icon until I hover over one.

mdi.bessarabov.com

In comparison, this site and seach result loaded instantly. It also includes the name below the icon.

When you click on an icon, you are brought to a page where you can copy the code, view example usage, or look at any metadata. Pretty cool!

---

Wrapping Up

That’s really all I wanted to show you in this post: a quicker and easier way to find and use MDI icons when building your Home Assistant dashboards. Kudos to the creator, I found it in this community forum post.