Adding Icons

Hello
Is there a way to have home assistant automatically download an icon from materialdesignicons.com if I enter the correct mdi name? For example I want to add the mdi:home-circle to a “view configuration” card, however this will only appear if I’ve downloaded the .svg file and imported it into my “www” folder in the “config” directory.
Thanks in advance for any help that can be provided.
Michael

Use the hyphen ;o)

To be clear: It’s
mdi:home-circle (as you correctly used in your posting), not
mdi:homecircle (as you inserted in the icon field of the card)

Thanks for pointing that out. Can I automatically have the icon downloaded from mediadesignicons.com if I put in the correct name into the icon field of the view configuration card or do I need to download it to my “www” folder? It would be nice to be able to have HA check to see if it had a copy of the “home-circle” icon and if it didn’t go and download it from mediadesignicons.com

If materialdesignicons.com is what you meant: Those icons are basically free. All you. have to do is to use the “mdi:” prefix in your Lovelace cards or .yaml files.

Thanks. Will the icon be downloaded automatically from materialdesignicons.com or do I need to download the icon to my www folder?

Just find the icon you want here: https://materialdesignicons.com/
And use mdi:iconname
Make sure the iconname matches exactly, including making sure to use only lowercase

As I had written above: Just insert mdi:yourselectedmdi-icon in your card or file. Yao don’t have to download the free ones.

Thanks Zoriontsu & pedolsky for your responses. I really appreciate your help. I’ve got it working now. When I looked at the name of an icon (for example mdiHomeCircle) on materialdesignicon.com I didn’t realize the correct input was mdi:home-circle. Now it works brilliantly. Thanks again.

Michael

The presentation takes a bit of getting used to when you first get into it (at least it did for me). Just hover with the cursor over the icon then you will see the correct “formatting”:

Bildschirmfoto 2021-04-29 um 22.26.36

Have fun!

1 Like

Thanks again.