Icon only in red when counter is >0

Configuration Frontend
1

Hello,

i again need you help as i am little bit unsure how to start.

I have a tile entitiy which is showing a counter.
I would like to have the icon in red, only if the counter is bigger then 1, so there is mail in the mailbox, otherwise just lightgray (as the other picutres shows)
How could i make it possible ?
I guess i need to work here with the card mod, but not quite sure how to work with the tile card then.

type: tile
entity: counter.breifkasten_nutzung
icon: mdi:mailbox-open-up-outline
name: Briefkasten
hide_state: true
tap_action:
  action: none
icon_tap_action:
  action: call-service
  service: counter.reset
  target:
    entity_id: counter.breifkasten_nutzung
show_entity_picture: false
vertical: false
color: red

red
red0
gray

Thanks in advance.

2

Two conditional cards, one for counter = 0 and one for counter > 0?

Since they will never appear at the same time, it will look as if the colour of the icon is changing.

image
image745Ă—154 7.68 KB

image
image745Ă—154 6.51 KB

1 Like
3

something like this ?

card_mod:
  style: |
    ha-card {
       {% set state = states('sensor.kettle_count_day') | int %}
       {% if state >= 1 %}
         --tile-color:var(--red-color) !important ;
       {% else %}
         --tile-color:var(--grey-color) !important ;
       {% endif %}
     }
4

Perfekt.
Thanks, this is it !

So i used this now.

Works like it should be, perfect.

type: tile
entity: counter.breifkasten_nutzung
icon: mdi:mailbox-open-up-outline
name: Briefkasten
hide_state: false
tap_action:
  action: none
icon_tap_action:
  action: call-service
  service: counter.reset
  target:
    entity_id: counter.breifkasten_nutzung
show_entity_picture: false
vertical: false
color: red
card_mod:
  style: |
    ha-card {
       {% set state = states('counter.breifkasten_nutzung') | int %}
       {% if state >= 1 %}
         --tile-color:var(--red-color) !important ;
       {% else %}
         --tile-color:var(--grey-color) !important ;
       {% endif %}
     }

@Stiltjack this is working too like i needed it, the other soluiton is just “easier” for me.
But Thanks

1 Like