Some material design icons do not work?

I’ve been able to make some customizations to my UI using icons from https://materialdesignicons.com

Most of the ones I’ve tried work. For example, these work as expected:

  • icon: mdi:mailbox
  • icon: mdi:eye

This one does not (it just leaves a blank on the panel):

  • icon: mdi:alarm-light

I don’t know if the problem is on my end (config file issue), a bug in HA (perhaps it doesn’t like the dash in the name), or a problem with the image on the Material Design site

Yes. I’ve seen some icons that are listed not work.

I found a page on the mdi website that shows them all and the one icon I wanted to use was greyed out and it also didn’t work in HASS.

Of course I don’t remember the url. Anyway, maybe I’ve given a hint that solves your issue.

I may be wrong however I think the icons have to be updated and pulled into ha. The icons you are trying to use might be new.

This is correct.
On the mdi site there is a clock icon that shows history. You can see that the alarm icons got added very recently.
I’m not sure how often mdi is updated in ha repo.

Thanks for the information. That raises a couple of questions…

Just came across this same problem. This is how I got around it.

On materialdesignicons.com you can download the icon as a .png. Then you can add that to your /www (or local) directory.

If you want the icon to match your other icons. These are the setting that I used that seemed to match up pretty good with the default HA frontend.
Size: 128 (made it better to avoid pixelization)
Padding: 25
Foreground: R: 68 G: 96 B: 158 (matched to the default HS Layout color scheme by using MS Paint and the eyedropper)
Background: no change (0,0,0)

image

Download by clicking the “Icon” button. Drop it in your /config/www directory.

customize.yaml
sensor.name:
entity_picture: /local/icon_name.png