hi chintito,
I used this code and the icon does change here
---
custom_card_cover:
entity: "[[[ return entity.entity_id ]]]"
name: |
[[[
var position = entity.attributes.current_position;
var state;
if (entity.state === 'open') state = 'Open';
else if (entity.state === 'closed') state = 'Closed';
else if (entity.state === 'opening') state = 'Opening';
else if (entity.state === 'closing') state = 'Closing';
else state = 'Unknown';
return `${state} | ${position !== undefined ? position + '%' : 'Unknown'}`;
]]]
show_name: true
show_icon: true
show_label: true
show_state: false
styles:
grid:
- grid-template-areas: |
"i switch"
"n n"
"l l"
"slider slider"
- grid-template-rows: 3rem 1fr min-content min-content
- grid-template-columns: 1fr 1fr
card:
- height: 100%
- padding: 10px
img_cell:
- justify-self: start
- align-self: start
- width: 20px
- height: 20px
- overflow: visible
icon:
- justify-self: start
- align-self: start
- width: 18px
- height: 18px
- overflow: visible
name:
- text-align: left
- font-size: "var(--fs-400)"
- font-family: Montserrat
- font-weight: 700
- justify-self: start
- align-self: end
- overflow: visible
- font-size: 1.2rem
label:
- text-align: left
- font-size: "var(--fs-300)"
- font-family: Montserrat
- font-weight: 500
- justify-self: start
- align-self: center
- color: var(--color-dark-gray)
- overflow: visible
- padding-bottom: 10px
custom_fields:
switch:
- width: 25px
- justify-self: end
- align-self: start
- color: var(--color-dark-gray)
- margin-top: -4px
state:
- value: "closed"
icon: mdi:curtains-closed
styles:
icon:
- color: var(--color-dark-gray)
custom_fields:
switch:
- color: var(--color-dark-gray)
- value: "open"
icon: mdi:curtains
styles:
card:
- background: "#A3D5D3"
name:
- color: "var(--color-white)"
label:
- color: "var(--color-white)"
icon:
- color: "var(--color-white)"
custom_fields:
switch:
- color: "var(--color-white)"
- value: "unavailable"
name: "?"
icon: mdi:window-shutter-alert
styles:
icon:
- color: var(--color-dark-gray)
custom_fields:
slider:
card:
type: custom:my-slider-v2
entity: "[[[ return entity.entity_id ]]]"
mode: position
vertical: false
styles:
card:
- height: 30px
container:
- border-radius: 8px
- width: 100%
progress:
- height: 100%
- background: white
track:
- background: "#EEEEEE"
thumb:
- height: 30%
- background: var(--color-blue)
- position: absolute
- right: 7px
- top: 11px
- width: 3px
- border-radius: 500px
switch: >
[[[
if (entity.state == "open") {
return '<ha-icon icon="mdi:arrow-up"></ha-icon>';
} else if (entity.state == "closed") {
return '<ha-icon icon="mdi:arrow-down"></ha-icon>';
} else if (entity.state == "opening") {
return '<ha-icon icon=mdi:window-shutter-alert"></ha-icon>';
} else if (entity.state == "closing") {
return '<ha-icon icon="mdi:window-shutter-alert"></ha-icon>';
} else {
return '<ha-icon icon="mdi:alert"></ha-icon>';
}
]]]
hold_action:
action: more-infotype or paste code here