Hello all. New to Home Assistant and just starting to setup everything. So far so good but would like to customize the icons to make them more interesting instead of flat looking. Can png images be used and if so, how? I see there are a lot of the “mdi” icons but I would like to use my own icons.
Thanks for any input of help someone might be able to provide.
Dennis
Hi!
I’m quite new as well… but I decided to have a look at the situation just for the sake of improving my knowledge on HA, which is not that great. lol
So, I figured out the entity-button doesn’t support anything but icons from MDI. I even tried to customize a specific entity in my configuration.yaml (https://www.home-assistant.io/docs/configuration/customizing-devices/) and it still doesn’t work.
But, while searching for a way to do what you want, I came across a wonderful custom card! Name is “button-card” (https://github.com/custom-cards/button-card)
Long story short, you need to copy the button-card.js file from github to your www folder and from there you will be able to use it in lovelace.
For instance, this is the code I typed in my lovelace yaml:
- type: custom:button-card
entity: light.basement_wall
show_entity_picture: true
entity_picture: /local/graphictest/lightbulb.png
I’ve created a folder named “graphictest” in my www folder. In that folder, I’ve copied a Light Bulb PNG with transparent background. (note: even though you feel like the path should be /config/www/graphictest/lightbulb.png, in fact, /local/graphictest/lightbulb.png will do the job… don’t ask me why it is like that 
haha)
Anyhow, once done, I’ve restarted my Home Assistant docker container and voilà:
Yeah, the icon is real big… but you would need to resize it at some point if necessary.
When clicking on the light bulb, it does turn on and off my basement wall lights! From there, read the docs from github, it is a very long document with pretty much all the features… I’m pretty sure there is something in order to facilitate the switching of icons depending the status of the light.
Hope it helped… I know it is not much, but I didn’t know how I would be doing it if I was you… I just decided to take 15 minutes in order to find some kind of a solution.
Cheers!
Oh thank you so much. I have it working now and this seems to be just what I wanted to do.
This was a big help.
Dennis
You’re welcome!
There is a MASSIVE thread regarding the custom button card here with some amazing examples of what can be done with it. I’m yet to try it since the coding for such examples is fairly extensive and I just don’t have the time, but hopefully one day…
With the help of William_Rodriguez (from another thread) on how to change the png when the button is clicked I finally have it working great. Exactly what I wanted. The icon changes along with the text color when I click the button. Here is the code below.
Thanks every one for your help,
Dennis
cards:
- type: 'custom:button-card'
entity: light.office
name: Office Lights
show_entity_picture: true
show_state: true
tap_action:
action: toggle
state:
- entity_picture: /local/icons/hueLigtOffSmall.png
value: 'off'
styles:
card:
- width: 160px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 20px
name:
- font-size: 18px
- color: gray
- align-self: middle
- padding-bottom: 10px
- padding-top: 20px
- entity_picture: /local/icons/hueLigtOnSmall.png
value: 'on'
styles:
card:
- width: 160px
- border-radius: 14px
- padding-top: 10px
- padding-bottom: 10px
- margin-bottom: 20px
name:
- font-size: 18px
- color: yellow
- align-self: middle
- padding-top: 20px
- padding-bottom: 10px
The HA web server maps HTTP ‘local’ to the directory /config/www