is it possible to use a mdi icon in a picture elements card in lovelace like the below:
entity: cover.aeotec_zw062_garage_door_controller_barrier_state_label
show_name: false
show_state: false
state_image:
open: 'mdi:garage'
tap_action: toggle
type: picture-entity
i can seem to get the correct format
You can use the “icon element”
You can do it with CSS:
- type: state-icon
entity: binary_sensor.door_window_sensor_158d1231d8525b
style:
top: 33%
left: 65%
'--paper-item-icon-active-color': red
the icon element doesnt change dependent on state tho. i want to have different mdi icon for different states
You can achieve this with another way:
Create a tempate cover for your cover and use your custom icons for on and off and then use that template cover into your lovelace.
ive set up the template in my config.yaml, but when i go to put that template cover into lovelace, what do i do it as?
A state-icon would do the work and also show the changes based on the icons you setup on the template.
This allows me to adjust most that I want. I only wish I could select a mdi: icon.
Anyone know how?
icon: mdi:lamp
does not work.
You can try using the config-template-card to customize icon card, here is our code:
- type: custom:config-template-card
entities: [light.family]
card:
type: custom:hui-picture-elements-card
image: /local/mainfloor.png
elements:
- type: icon
icon: "${if (states['light.family'].state === 'on') 'mdi:lightbulb-on';else 'mdi:lightbulb-outline'}"
tap_action:
action: toggle
entity: light.family
style:
top: 70%
left: 70%
color: "${if (states['light.family'].state === 'on') 'red';else 'gray'}"
--iron-icon-height: auto
--iron-icon-width: 4vh
This will change both color and icon based on the entity state.
Thanks, will take a look.
OK, Have it installed and configured for one entity. No errors, but no floorplan. Blank page.
Using same .png file and location as original that worked. Is " hui-picture-elements-card" included or is there another .js file to install?
Please share your code so we can take a look.
ok thanks just modified your example for local entity.
- type: custom:config-template-card
entities: [light.lr_lt_wndw]
card:
type: custom:hui-picture-elements-card
image: /local/pics/floorplan.png
elements:
- type: icon
icon: "${if (states['light.family'].state === 'on') 'mdi:lightbulb-on';else 'mdi:lightbulb-outline'}"
tap_action:
action: toggle
entity: light.lr_lt_wndw
style:
top: 70%
left: 70%
color: "${if (states['light.lr_lt_wndw'].state === 'on') 'red';else 'gray'}"
--iron-icon-height: auto
--iron-icon-width: 4vhTry change light.family to your light.lr_lt_wndw in icon:
icon: “${if (states[‘light.family’].state === ‘on’) ‘mdi:lightbulb-on’;else ‘mdi:lightbulb-outline’}”
Sorry, I did miss that one. Yes that did it.
Now to add 55 lights and 21 cameras.
I am sure I will have issues with syntex… Any other examples around?
Thanks for helping with this…
Great, I have a ton to convert also myself 
Is there anyway to use the entities variable (or set another) so the same entity does not have to be typed in 3 times?
Having strange results. The first entity(light) works normal ON = Red OFF = outline icon.
But the 2nd, 3rd, and 4th lights turn ON but icon does not turn Red and will not turn OFF. If any of them (2-4) are ON and light 1 is turned ON its icon turns Red and the others that are ON also turn Red… Reverse is true for Off. The first entity seems to influences the 2nd-4th ones.
I just copied the codes from the 1st for the other 3 and changed the entities.
Wonder if the other Picture-Element Card is interfering.
- type: custom:config-template-card
entities: [light.lr_entrnc_lt]
card:
type: custom:hui-picture-elements-card
image: /local/pics/floorplan.png
elements:
- type: icon
icon: "${if (states['light.lr_entrnc_lt'].state === 'on') 'mdi:lightbulb-on';else 'mdi:lightbulb-outline'}"
tap_action:
action: toggle
entity: light.lr_entrnc_lt
style:
top: 40%
left: 43%
color: "${if (states['light.lr_entrnc_lt'].state === 'on') 'red';else 'gray'}"
--iron-icon-height: auto
--iron-icon-width: 3vh
- type: icon
icon: "${if (states['light.lr_lt_kit'].state === 'on') 'mdi:lightbulb-on';else 'mdi:lightbulb-outline'}"
tap_action:
action: toggle
entity: light.lr_lt_kit
style:
top: 31%
left: 43%
color: "${if (states['light.lr_lt_kit'].state === 'on') 'red';else 'gray'}"
--iron-icon-height: auto
--iron-icon-width: 3vh
- type: icon
icon: "${if (states['light.lr_lt_wndw'].state === 'on') 'mdi:lightbulb-on';else 'mdi:lightbulb-outline'}"
tap_action:
action: toggle
entity: light.lr_lt_wndw
style:
top: 31%
left: 51%
color: "${if (states['light.lr_lt_wndw'].state === 'on') 'red';else 'gray'}"
--iron-icon-height: auto
--iron-icon-width: 3vh
- type: icon
icon: "${if (states['light.lr_lt_tv'].state === 'on') 'mdi:lightbulb-on';else 'mdi:lightbulb-outline'}"
tap_action:
action: toggle
entity: light.lr_lt_tv
style:
top: 40%
left: 51%
color: "${if (states['light.lr_lt_tv'].state === 'on') 'red';else 'gray'}"
--iron-icon-height: auto
--iron-icon-width: 3vhYou need to add all the lights to the entities:
entities: [light.lr_entrnc_lt,light.lr_lt_kit,… ]
Or use
entities: [group.all_lights]
for all lights.
Thanks again. That did it.