Please share the code 
yes,please
Even if I am not using this yet, I would love to have that view code too
It is very nice looking!
For all those chasing my custom addons I have started a thread over here - Dwains Theme - Custom Addons so as not to hijack away from this awesome card.
good to see your fiddle leaf stopped fiddling with its firmware version 
1 Like
Small update: ended up removing battery percentage text from the images, things just got too confusing. Also added groups for lights per certain floor and toggle button to turn off all the lights. Works fine when movement sensor controlled lights are excluded so there are always lights on when you walk the stairs.
hello
how can i change the battery icon size?
after the update to 110.1 the control of it is gone 
Fairly standard robot vacuum map with zoned cleaning:
My home router is in a cabinet with lots of other devices and I found that it became unstable when it got too hot so I added a temp sensor and automation to turn on/off a fan. Here is the representation with manual override:
ââmdc-icon-sizeâ: 3px
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