#Icon color red based on sensor state

1 messages · Page 1 of 1 (latest)

lunar hornet
#

I had an issue to set the icon color to "red" if state was set to "heating"

type: custom:paper-buttons-row
styles:
  gap: 8px
  justify-content: flex-start
  overflow-x: scroll
  width: calc(100% + 20px)
buttons:
  - layout: icon|name
    name: Main
    icon: mdi:heat-wave
    entity: sensor.mysa_main_status
    state_styles:
      heating:
        button:
          background-color: "#FF8A8A"
    styles:
      name:
        color: black
        padding: 0 10px
      button:
        display: flex
        background-color: white
        border-radius: 24px
        color: white
        height: 34px
        flex-basis: 1
        flex-shrink: 0
      icon:
        "--mdc-icon-size": 26px
        color: white
        width: 36px
        height: 36px
        display: flex
        justify-content: center
        align-items: center
        background: black
        border-radius: 50%
        margin-left: "-2px"