Site to make it easier to find Material Design Icons

Not on mobile!

Another tool to help pick material design icons is an extension for Visual Studio Code editor called Material Design Icons Intelllisense which is real handy! It’s nice to go along with the Home Assistant extension.

It will give you a tiny preview in line of the icon you selected, as well doing auto-complete/fuzzy search on the icon name as you type mdi:.. into the file you’re editing.

1 Like

@bessarabov
I just created and account to let you know that I appreciate this site and how amazing it is.

1 Like

awesome page! but please make a “SEE ALL” Button

1 Like

I noticed https://cdn.materialdesignicons.com/4.4.95/ now redirects to: @mdi/font CDN by jsDelivr - A free, fast, and reliable Open Source CDN. There doesn’t seem to be a way to view the icons there. Clicking on the preview.html file displays the text of the html without actually rendering it in the browser. Do you (or anyone else) know how to search icons in this repository now?

It seems they moved. See their issue Cheatsheet not working ¡ Issue #6036 ¡ Templarian/MaterialDesign (github.com).

The new cheatcheet (for the current latest version 6.1.95) can be viewed here: Material Design Icons (pictogrammers.github.io)

1 Like

@bessarabov very handy site! Thank you for this. Which version of mdi does your site now use? And maybe show the version on your site as info. Another suggestion is to filter what’s only currently available in home assistant. Still don’t know how to check that.

1 Like

Thank you for that info. Since HA isn’t on that version, here’s the link to 4.4.95 in case it helps others: Material Design Icons

1 Like

Thanks! So how do you exactly see on which version it is. Is it in a configuration file somewhere?

In the frontend code

2 Likes

Oh, so we’re on 6.1.95 now? Just a few days ago I wasn’t able to use some of the newer icons; I guess I need to update again and see if I can now.

I think that was the result of a commit that is quite recent.

1 Like

Great work! thanks it’s a very handy and fast site!

1 Like

Which version of mdi does your site now use? And maybe show the version on your site as info.

Thank you for this proposal! I completely agree — this info should be easily available. So, I’ve added a footer to every page on the site https://mdi.bessarabov.com with information about version. Now the site is showing icons in the latest mdi version v6.1.95

I’m trying to keep this site with up to date version of mdi, but frankly speaking there is no automation about that — from time to time I check the upsteam and release the updated site (you can the dates when I update site by looking at co commits its in the repo — Commits · bessarabov/mdi · GitHub (before doing the release I need to update files in that repo)

Another suggestion is to filter what’s only currently available in home assistant

Yes, I really like this idea, thank you. But for the moment it is not completely clear how to do it properly. Maybe some day I will implement this feature, but I can’t tell you the date or even say for sure that I will do it.

Something I always wonder but have no clue if it’s available. Material Design website tells you about animated icons. Are these included in the normal icons too?