Site to make it easier to find Material Design Icons

Share your Projects!
#1

I have created a site https://mdi.bessarabov.com :tada: :grinning: The idea is to make it simple to search for the Material Design Icon that you need.

1

I really like Home Assistant and Material Design Icons, but I can’t use the official site https://materialdesignicons.com — it is extremely slow. There are some other problems with that site but the main one is the speed how it works.

So, I have created the site for the icons that I want to use.

  • It is fast. (it is using static html files)
  • It has mobile version
  • There is a page for every icon
  • There is a preview for for icon when you share a link
  • There is a search (try searching for “tower”)

I’m very happy that I can create links to icons in README.md in my custom lovelace card animated-consumption-card

Screenshot 2020-06-09 at 13.26.43

My main usage of Material Design Icons is to use them in Home Assistant, so I have tagges some icons with the areas that I use most:

I hope that this site can be usefull for you.

Some additional information about this project in my blog https://ivan.bessarabov.com/blog/mdi-bessarabov-com-is-released

UPDATE 2020-06-23

I have just released new features on this silte. Now there is information about first version when the icon appeared and the message if it is avaliable in Home Assistant and also a HA code usage sample and a preview:

Screenshot 2020-06-23 at 13.56.32
Screenshot 2020-06-23 at 13.56.321552×989 150 KB

(this is a screenshot from the page https://mdi.bessarabov.com/icon/fridge-alert )

57 Likes
Documentation of built-in symbols / icons
Quick preview for hass icons?
#2

pretty cool. just added a couple to my gui, because it was quick and easy to find. The tags are neat.

One suggestion if i may. Can you add another copy option with “icon:” included as well? That would make adding them a little faster…

added to my sidebar:

panel_iframe:
  iconindex:
    title: "More Icons"
    icon: "mdi:share"
    url: "https://mdi.bessarabov.com/"
1 Like
#3

I see you are using the latest version available. Any chance of a filter for the latest version supported by home assistant?

1 Like
#4

Not criticising your work in any way, I agree that searching on the main site is very slow, however I find a ‘find’ on https://cdn.materialdesignicons.com/4.4.95/ (I believe 4.4.95 is the latest version supported in HA) fairly quick to search, this will save you updating the site each time HA updates the version they support.

2 Likes
#5

Thank you!

Can you please tell me what system expects info about inco in the form icon:car ?

#6

Yes, you are right. Site https://mdi.bessarabov.com shows the latest version of material design icons.
But Home Assistant uses mdi 4.9.95 — https://github.com/home-assistant/frontend/blob/edc4601f8e24a1260b7fd3ed54126ad465f786f1/package.json#L39-L40

I really hope that Home Assistant will update mdi soon (if I understand it correctly the 0.110 changes in icons were made to make it possible to update mdi).

For now I don’t have the exact plan how to limit icons on the site only by some version. I would like to write at the icon page “that this icon was first introduced in mdi 1.2.3” but for now I don’t know where to get that data (I’m sorry, but I can’t say when I’ll do this feature)

#7

Yes, thank you. I know about https://cdn.materialdesignicons.com/4.4.95/ and I’m quite happy with this site, but it lacks some features that I thin icon site should provide: the page for every icon and mobile version. I should have mention this site in my text.

#8

Sorry what I mean is,

icon: 'mdi:car'

for direct copy/paste into HA

#9

nice, looks like a fun little project to play with their api

an improvement I would suggest, start showing results after the first char is entered, and update after each new or deleted char

#10

Great job on the site! A lot faster than the official one.

One of the main reasons why HA hasn’t updated to the latest Material Design Icons version yet is because MDI v5.0 contains a very large number of breaking changes - 121 icons renamed, like 70 brand icons removed, etc.

4 Likes
#11

God I get sick of the official mdi site being so slow. Wonderful! Many thanks.

2 Likes
#12

Hi, how can i use this beautiful icons using JSF ? thanks

#13

What is jsf?

#14

JAVA server faces

#15

ah, great this is so much faster :smiley: Thanks and keep up the good work :muscle:

#16

I’ve just releases an updated version of the site. Now there is a textarea with Home Assistant yaml sample:

Screenshot 2020-06-23 at 14.05.39
Screenshot 2020-06-23 at 14.05.391228×412 35.8 KB

(this is the page from the screenshot https://mdi.bessarabov.com/icon/bullseye )

This is not exactly what you were asking for, but maybe it will suit your needs.

#17

This really comes in handy in the development of my custom card. Thanks a lot!
I really hate the official site, it seems to almost crash my browser on every search.
Small question: i heard there are some special hass: icons. Specific to HA UI. Are they included?

1 Like
#18

Thank you!

Sorry, I don’t know anything about hass: icons. I’ve searched all the markdown files that are used to generate https://www.home-assistant.io (repo https://github.com/home-assistant/home-assistant.io ) and I’ve found only one usage of such icon. hass:television on the page https://www.home-assistant.io/lovelace/entities/

I’ve made some experiments and it looks like it does not matter what prefix to use mdi: or hass:. I’ve tried mdi:cog and it looks the same as hass:cog, mdi:car is the same as hass:car.

I haven’t found the evidence, but I think that hass: is the prefix that was used some time ago and now it is deprecated in flavour of mdi: (It looks that this true, but I may be completely wrong, maybe somebody can confirm it os say that this is not the case)

#19

love the site - so useful! Thanks for your work :+1:

1 Like
#20

this is amazingly awesome! thank you so much

1 Like