I’ve started creating some custom icons to ‘fill in the gaps’ where Material Design Icons doesn’t already have something suitable. I’m using the template from here https://materialdesignicons.com/custom to create the icons, but I’m not sure how to implement them in my Home Assistant config.
I tried
entity_picture: /local/my-custom-icon.png
but Home Assistant blew the image size up and made it larger than all the other icons, & it seems that Home Assistant automatically colours the icons?
Is there a specific (proper) way to use custom icons locally? (that haven’t been added to Material Design Icons )
I set my png files for 600x600 and then stored them in the www folder off the root of my HA installation. (If you don’t have one you can create it, but make sure the perms are correct).
I call them in customize like this:
switch.aeotec_smart_switch_6_switch_10_0:
friendly_name: Washer Power Switch
entity_picture: /local/washer.png
switch.aeotec_smart_switch_6_switch_11_0:
friendly_name: Dryer Power Switch
entity_picture: /local/dryer.png
I just made pictures of icons following the color and style of the material design one, then I included them like @rpitera showed.
The icons were a bit big so I made the picture bigger while keeping the icon the same size in the middle (more empty space around edges). Adjust as needed until the icon looks like the right size.
I’ve only got 2 (one for google home, one for philips hue), just amature picture editing in paint.net. They don’t really look great so not worth sharing
Thanks but as I already wrote, I tried the ‘normal’ method of ‘entity_picture’, but the canvas is bigger than the regular material design icons.
I guess I could add the padding (spacing) myself, and with trial and error try to make them fit it with the other icons.
I don’t mind sharing them when I’ve finished them, but what I was really looking for is a way to use these icons in the same way that the material design icons are used. I guess I’m looking for specific dimensions on the icons, resolutions, and the ‘proper’ way to use them in the config (instead of ‘entity_picture’ which doesn’t use the same size as the normal icons).
As I said above, I have two pngs that were 600x600 and I didn’t have to do anything. HA resized them as appropriate for the space as you can see. I think the key to this is they have to be the same dimensions width and height.
But if you are looking for instructions to make them the exact same size as the MDI icons, there are none. Entity picture is currently the only way to do this unless you want to rewrite the CSS for HA (and then stow and replace each time you update as it will break git).
Im using a netgear router so I just use the netgear component in home assistant to see if things are connected to the internet or not. I think you can do the same thing with nmap or ping components, or if you have one of the router brands that home assistant has components for: https://home-assistant.io/components/device_tracker/
I have an idea to have an index of HA related icons. i.e. with category, usage, name etc.
I started working on a list already but I’m not sure the best way to render the list for consumption
Seems that MDI icons cannot be used on the github managed HA docs pages…(love to be corrected if I am wrong)
I think it would be really nice to have an iframe in HA with icon reference.
