Other styles for “state-icon” & “icon”:
- colored icon.
The “state-icon” element MUST be associated with some entity, the “icon” element - MAY be associated.
state-icon:
By default for entities like "sensor" (same for "device_tracker", "person", "zone", …) an icon’s color for the “state-icon” does not depend on the entity’s state.
The "--paper-item-icon-color" variable is used to change a color:
type: picture-elements
card_mod:
style: |
ha-card {
height: 70px !important;
}
elements:
- type: state-icon
entity: sensor.cleargrass_1_co2
style:
top: 6%
left: 10%
- type: state-icon
entity: sensor.cleargrass_1_co2
style:
top: 6%
left: 40%
'--paper-item-icon-color': red
image: /local/images/white.jpg
By default for entities like "binary_sensor", "sun.sun", "switch", "input_boolean" an icon’s color for the “state-icon” DOES depend on the entity’s state - if the property "state_color: true" is set for the element. If it is set to "false", then the color DOES NOT depend on the state.
The "--paper-item-icon-active-color" & "--paper-item-icon-color" variables are used to change a color.
The "--paper-item-icon-active-color" variable affects on color if the property "state_color: true" is set for the element.
The 1st row on the picture below is for "state_color: true", the 2nd row - for "state_color: false".
type: picture-elements
card_mod:
style: |
ha-card {
height: 170px !important;
}
elements:
- type: state-icon
entity: binary_sensor.service_on_value
state_color: true
style:
top: 6%
left: 10%
- type: state-icon
entity: binary_sensor.service_on_value
state_color: true
style:
top: 6%
left: 35%
'--paper-item-icon-active-color': red
'--paper-item-icon-color': cyan
- type: state-icon
entity: binary_sensor.service_off_value
state_color: true
style:
top: 6%
left: 65%
- type: state-icon
entity: binary_sensor.service_off_value
state_color: true
style:
top: 6%
left: 90%
'--paper-item-icon-active-color': red
'--paper-item-icon-color': cyan
- type: state-icon
entity: binary_sensor.service_on_value
state_color: false
style:
top: 20%
left: 10%
- type: state-icon
entity: binary_sensor.service_on_value
state_color: false
style:
top: 20%
left: 35%
'--paper-item-icon-active-color': red
'--paper-item-icon-color': cyan
- type: state-icon
entity: binary_sensor.service_off_value
state_color: false
style:
top: 20%
left: 65%
- type: state-icon
entity: binary_sensor.service_off_value
state_color: false
style:
top: 20%
left: 90%
'--paper-item-icon-active-color': red
'--paper-item-icon-color': cyan
image: /local/images/white.jpg
icon:
The "color" CSS property is used to change an icon’s color:
type: picture-elements
card_mod:
style: |
ha-card {
height: 70px !important;
}
elements:
- type: icon
icon: mdi:car
style:
top: 6%
left: 10%
- type: icon
icon: mdi:car
style:
top: 6%
left: 40%
color: red
image: /local/images/white.jpg
