to the OP…
to find out how to use the custom_ui we are referring to above then go here:
but also be aware that as marius mentioned above some (most?) of that functionality has been removed from the latest versions of HA in Lovelace.
to elaborate on that:
I wouldn’t say Most, a lot still works very fine. I happen to use almost all options of custom-ui, but if you only try to template icons and icon_colors, and entity_pictures as the OP wants to do, there’s not issue doing so.
Beware though that not only Lovelace has been taking out functionality, bit also regular HA. Especially noteworthy is the _stateDisplay option. If you want that, remain in the 84.x region…
also, the later updates have also started to deprecate custom Tiles. so, you must be warned that not all advance is progress…
Yes I’d already gathered in the reading I’ve done on the forums that everything is in a state of flux at the moment with Lovelace becoming the default UI.
@Mariusthvdb - All I’m wanting to do is display a state-related icon rather than the text. So for doors, the mdi garage open/closed icons. For climate, flame, icicle, etc. It’s pedantic I know, but I’m a bit OCD sometimes - it’s the small things! With the help of trusty old MS Paint - an example using the garage doors.
@finity - thanks for the link, will check it out and see if I can get something working. For now, unfortunately, my day-job calls.
your issue might be you want to mix the mdi:icons (used in the icon field) in the entity_picture field, (used for the badges)
if you use an entity_picture template you are able to use the state for determining the displayed picture in the badge.
although I must confess I have never tried to use an mdi:icon in the entity_picture template, I would think that not to be optimal ( the docs don’t explicitly state its not possible…)
note that this isn’t a custom-ui template but a regular template sensor template.
if you’d use custom-ui, things get a bit more complicated, since it it using javascript syntax. Let me know if you need help with that, got some nifty template for that too 
I understand what you’re getting at. Have thrown on custom-ui, will have a play. Definately keen on whatever you’ve got to share - do you have a github repo?
I’m a noob to HA/YAML/Python, but been around shell, JS (incl Angular, node.js etc), HTML etc for years. Compulsive tinkerer!
Late to the party, just wanted to say that binary states are kinda possible by hiding/showing badges. Mini-example:
badges:
- type: entity-filter
entities:
- entity: person.me
name: Me
icon: mdi:home-account
state_filter:
- "home"
So, basically you can use one badge (with icon/picture) when a person is home (a sensor is on, …) and another when not.
/Victor
3 Likes
Did you end up getting anywhere with this?
I’m trying to achieve something similar…
I didn’t sorry @AJG. Other things became more important - I do hope to come back to it at some stage though. Do reply here if you have a crack at it!
For anyone asking - I believe it is possible using card-mod, take a look.
scrap it. properly asked question is at least 50% of the answer 
Card mod lets you mod the look of what’s presented, he wants to switch words for icons. He’ll have to use something that allows him to adjust what the field returns. That’s not card mod.
@bnutt Ben, how do you get the picture of you and Sarah in the badge?
Can you post the config and the file name in which the config goes.
Thanks
Now that’s a question I can answer… Just need to upload the images - mine are in the www/images subfolder, which resides in the config folder (where configuration.yaml exists). If this doesn’t exist (either www or images) you can create them - but from memory you need to restart HA for them to be picked up.
When your images are there, you should be able to browse to the image directly by navigating to homeassistant.local/local/images/person.jpg (of course, replace homeassistant.local with whatever domain you use).
Then you need to use the customize functionality of HA to associate the image with the person entity. I have customize broken out to another file as per the below snippits.
#configuration.yaml
customize: !include customize.yaml
#customize.yaml
person.ben:
entity_picture: "/local/images/ben.jpg"
person.sarah:
entity_picture: "/local/images/sarah.jpg"
Hope that works for you!
This topic seems to be related to my issue at hand so I will piggy-back here…
The text inside my badges is too large when displayed on the app.
They are fine in a browser. What can be done?
But then I have still the state as word and not the icon displayed, haven’t I?
badges:
- type: entity-filter
entities:
- entity: light.test
name: Me
icon: mdi:home-account
state_filter:
- "on"
shows “on” and not the icon with state, e.g. a yellow or grey lightbulb?
I came to this post, because I searched for the same. I want to have the state icon displayed, as in every entity card, etc. instead of the entity state as a word. This is still not possible? Same es in standard for sun.sun. updates, motion sensor, … But wanted for lights, shutter, etc.
I wonder, why there is a icon attribute here, if no icon is shown? Or what is about my-custom-badge here. Unfortunately there are no examples for custom badge types there.
The contents inside the badge circle are not configurable, they are based on the domain type. A light by default shows the state in the circle. That documentation is wrong or out of date.
That would be fine and is the same on the left site of the entity card, etc., where the lightbulb for lights is shown. I only want to have the lightbulb from the light entity shown (on or off) instead of the written state “on” or “off”. Based on domain type is completely fine, but with icon instead of text. Same as for sun.sun, motion sensor, HA update, …
Yes, but what you aren’t understanding is that you can’t customize them. They are what they are. If you want something like that, make a glance card that conditionally appears. Or you can get inventive with panel mode and a header and a glance card. Base badges are not visually configurable aside from turning things on and off.
What a pity. But thanks for this information. I hope, that this will be changed in the future. E.g. to be able to choose what to display inside of the circle and what is displayed as text below.
What I now get on my own and missed as a newbie hint, is to create additionally binary sensors of this devices, e.g. light-state and use them. Then I have a lightbulb icon, if I choose this.
More or less what I wanted. Try to set the rest (color, etc.) with card-mod afterwards.
I doubt it at this point. It’s been 5 years since we’ve seen any change to these. Most people do not use them from what I can tell. You can always customize them yourself with custom cards.
Did the sun badge get changed in the last update? It use to have an image in the middle of the badge. It is blank for me now.