Change icon color based on sensor state

Configuration Frontend
1

HI
I’m new and I’m studying a lot to understand why I started from scratch without knowing anything.
I’m making a card with a custom button but I can’t make the color of the icon change based on the status of the sensor template created.
I’ll leave the code below.
I’m interested in changing both the type of icon and the color.
thanks

type: custom:button-card
entity: sensor.luci_accese
name: LUCI ACCESE
layout: icon_name_state2nd
show_state: true
show_icon: true
icon: >
  [[[ if (entity.state > 0) return "mdi:lightbulb-group"; else return   
  "mdi:lightbulb-group-off" ]]]
styles:
  card:
    - padding-top: 2%
    - padding-bottom: 2%
    - height: 80px
    - width: 300px
  state:
    - font-size: 140%
    - font-weight: bold
    - justify-self: start
    - align-self: center
  name:
    - font-size: 85%
    - justify-self: start
    - color: var(--secondary-text-color)
tap_action:
  action: none
2

This should be what you are looking for.

type: custom:button-card
entity: sensor.luci_accese
name: LUCI ACCESE
layout: icon_name_state2nd
show_state: true
show_icon: true
icon: >
  [[[ if (entity.state > 0) return "mdi:lightbulb-group"; else return   
  "mdi:lightbulb-group-off" ]]]
styles:
  card:
    - padding-top: 2%
    - padding-bottom: 2%
    - height: 80px
    - width: 300px
  state:
    - font-size: 140%
    - font-weight: bold
    - justify-self: start
    - align-self: center
  name:
    - font-size: 85%
    - justify-self: start
    - color: var(--secondary-text-color)
  icon:
    - color: |
        [[[ return entity.state > 0  ? 'green' : 'gray';
                ]]]
tap_action:
  action: none
1 Like
3

thank you it works

1 Like