I added a page to my sidebar menu where I can search for MDI Icons (loading https://mdisearch.com in an iframe)

Share your Projects!
1

I found this really fast and minimal website where you can search for MDI icons: https://mdisearch.com

I decided to add this as a sidebar menu item and load it an iframe, because I regularly need to find icons for entities, menu items, buttons, etc. (Sometimes I’m in a text editor or on a page where I don’t have search or autocomplete for icons.)

Screen Shot 2022-11-18 at 1.22.15 AM
Screen Shot 2022-11-18 at 1.22.15 AM3072×1534 296 KB

It’s super easy with the iFrame panel integration:

  panel_iframe:
    mdi_icons:
      title: "MDI Icons"
      url: "https://mdisearch.com/"
      icon: mdi:shape-plus

This site is open source: GitHub - ThomasKientz/mdisearch: MDI Search is a lightning fast search engine powered by Algolia to help developers find the best icons and create stunning user interfaces.
But it’s a firebase Node.JS app that uses Algolia for search, so it’s not super easy to self-host. I just decided to load the hosted version in an iframe instead of figuring out how to run it locally.

6 Likes
2

@ndbroadbent , this is awesome! Thank you for sharing.

1 Like
3

This is a GREAT idea, thank you so much for sharing! I added the code you shared to my config.yaml file, and the icon shows up on the sidebar, but when I click on it I only see a blank page with the MDI Icons header, nothing else. Did I do something wrong?

4

Hmm, are you able to visit https://mdisearch.com? I would also open the developer console and look to see if there are any JavaScript errors or failing network requests.

5

I’ll confirm that @ndbroadbent code works as posted in his first message. Installed in my configuration.yaml, restarted HA, clicked on the sidebar link and voila, the MDI page with icons loads

1 Like
6

Necromancing the topic because it was the first result on Google: the integration posted in the original message is long gone, and now it’s possible to do that directly in configuration.yaml via the panel_custom integration.