hey,
i tried to do this, it’s still same
i attached image from my yaml file template
Example that works for me
- entity: switch.lds_zb_onoffplug_d0005_c4a841fe_on_off
style:
'--mdc-icon-size': 50px
background-color: var(--paper-card-background-color)
border-radius: 50%
height: 60px
left: 10%
padding: 10px 0 0 10px
top: 40px
width: 60px
z-index: 2
tap_action:
action: toggle
type: state-icon
great !
it’s work !
thanks a lot !
Hi, i have a state-icon in picture element card of my cellular battery sensor. It’s possible to change the color of icon based on battery level?
This is my config:
- type: picture-elements
image: /local/picture/xxxxxx.png
style:
.: |
ha-card {
background-color: transparent; border: none; box-shadow: none;
}
elements:
- type: state-label
entity: person.zzzz
style:
color: white
top: 95%
left: 50%
- type: state-icon
entity: sensor.redmi_note_5_battery_level
title: Batteria Residua
style:
top: 10%
left: 11%
--iron-icon-height: 20px
--iron-icon-width: 20px
Thanks
You could use custom UI with templates to set colour depending on state
This will need some manual changes to one of the js files after install to make it work with colour since 0.110 as it has not been updated yet. See:
You can also use this for giving colors to icons:
'--paper-item-icon-color': red
I use this together with conditions to have several colors. But my conditions are mostly text based or binary, so it’s easy. For percentage I don’t think this will work if you don’t want to have conditons for each single percent.
But I also have a problem:
I updated to HA 0.110.2 yesterday and observed, that this command doesn’t size my icons anymore:
'--iron-icon-height': 20px
Does somebody have observed it as well and has a solution yet? It’s not that urgent and because the iron-icon commands are not officially documentated, I don’t think I have to open an issue for this.
Edit: I found a workaround in this post: Help: Want to change Lovelace picture element icon size
After some tryouts, I think this will work fine for me. The default icon size is 25px and if I want to have 20px, this are 80 percent. Without using “translate” I would also have to change the x,y percentage for placig the icon. With 50,50 it can remain as it was:
transform: 'translate(-50%, -50%) scale(0.8, 0.8)'
Change --iron-icon-height’: 20px with: --mdc-icon-size: 20px
Thanks! This is also working as well as using the transform as mentioned in my post, but is a little bit easier in use.
Hey all,
I’m using it as a card for controlling media devices, but when i use it on another device, with a different resolution it doesn’t always resize correctly. Is there a possiblity to change the size of image based on what device resolution is used? Here’s what I’m trying to explain:
and
and the relevant code:
- title: Media
path: media
panel: true
badges: []
cards:
- elements:
- conditions:
- entity: media_player.emby_living_room_tv
state_not: playing
- entity: media_player.emby_living_room_tv
state_not: paused
elements:
- artwork: full-cover
entity: media_player.spotify_mart
hide:
power: true
progress: false
runtime: false
source: true
volume: true
controls: false
style: |
:host {
left: 25% !important;
top: 35.9% !important;
width: 42% !important;
height: 62.3% !important;
}
ha-card{
border-radius: 1vw !important;
overflow: hidden !important;
height: 100%;
}
:host #primaryProgress{
background: #474A52 !important;
}
type: 'custom:mini-media-player'
type: conditional
- conditions:
- entity: media_player.emby_living_room_tv
state_not: playing
- entity: media_player.emby_living_room_tv
state_not: paused
elements:
- style:
left: 75%
top: 35.8%
width: 42%
height: 62.3%
type: 'custom:spotify-card'
limit: 10
client_id: !secret spotify_clientid
type: conditional
image: /local/background.jpg
style: |
ha-card {
background-color: var(--primary-background-color);
}
type: picture-elements
Thanks! is there also a new value to use for --iron-icon-fill-color: “#DC071D” does also not seem to work anymore 
Workaround, you could use a conditional card that switches the settings based on the device.
1 Like
Sorry, scratch that, you’d need to step up the juice from conditional card to state switch card to do it. I use it similarly, it works well:
Thaks, do you maybe have an example?
See github repo linked in my profile.
Hi,
I need help with that card.
I need when I click on the main picture it goes to a specific URL,
But in the picture-element I’m not getting
image: \local\office.jpeg
tap_action:
action: navigate
navigation_path: office
elements:
- type: state-label
style:
color: white
top: 96%
left: 88%
font-weight: bold
entity: sensor.temperature_158d0004445
- type: state-icon
style:
color: white
top: 95%
left: 96%
entity: sensor.temperature_158d0004445
- type: state-icon
style:
color: white
top: 84%
left: 96%
entity: light.escritorio
- type: state-icon
style:
color: white
top: 72%
left: 96%
icon: 'mdi:air-conditioner'
entity: climate.office_ac
type: picture-elements
That color wheel 
How can I integrate honeycomb menu in a picture element card?
1 Like
@sian it looks great, congratulations!
How do you get that coloured circle around the icons !?
1 Like
Looks great! 
What app did you use to model the floorplan?
Are you using images/icons on some places (like those 2 in the garage) ?
… and by the way, does the “persons” show up on the rooms when there’s movement in there, or is it part of the floorplan image? I see some rooms with people, and some empty 
Thanks 
Yes, the people appear if there is movement in the room.
The circular images in the garage and other places are cameras.
I asked my wife making the plan using https://home.by.me