Change Icon State Color on Condition

Configuration Frontend
1

Several sensors in a glance card return numeric values > 0 when active. I’ve been all over this, but can’t seem to get the icon color to change to an active state when the sensor is not zero.

I’m not trying to change the actual icon like I’ve seen in other posts, but trying to just set the icon state as active. I’d prefer to let the color to be dictated by the theme, but I’m willing to try anything at this point.

Can anyone give me a nudge in the right direction?

-DBB1

2

Something like this in the card definition:

    styles:
      icon:
        - color: |
            [[[
              if (entity.state == 'on') return 'white';
              else return 'yellow';
            ]]]
3

Thanks for the reply, Russell. I’ll play with this some more, but so far have not been able to get this to work.

The sensor icon I’m trying to get to change to an active state is normally zero but reflects a variable rpm value when running. I also have the option to use another sensor for the pump that reflects it on/off state.

The pseudo expression of ‘if rpm > 0 set icon status to on’ seemed simple enough but the actual solution doesn’t seem to be that simple.

4

I’m not sure if “rpm” is an attribute, but if it is, something like this should work:

    styles:
      icon:
        - color: |
            [[[
              if (states[YOURENTITYNAMEHERE].attributes['rpm']=0) return 'white';
              else return 'yellow';
            ]]]
5

I couldn’t get this to work directly in a glance card. I ended up wrapping a template card around it to look at the pump’s on/off status and change the icon color of the targeted sensor accordingly.

The downside of all of this is that I will have to match the icon color manually to any theme I choose, rather than to allow the default icon behavior address it:

   - type: custom:config-template-card
    variables:
      PUMP_STATE: states['switch.pool'].state
    entities:
      - sensor.pump1_rpm
    card:
      type: glance
      entities:
        - entity: sensor.pump1_rpm
          icon: mdi:speedometer
          name: RPM
      title: Pump Status
      card_mod:
        style: |-
          ${ if (PUMP_STATE === 'on') {
             'ha-card {--card-mod-icon-color: gold;}'
           } else {
            'ha-card {--card-mod-icon-color}'
           }}
6

No need to use config-template-card, use templates of card-mod itself.

7

hi,
i tried to use this solution in a glance card, but without succes… no icon color…
When i leave out the if then else it works

Any help would be appreciated

              - type: glance
                variables:
                  X_STATE: states['light.ac_0e672c2_9'].state
                show_name: true
                show_icon: true
                show_state: true                
                entities:
                  - entity: sensor.zigbee3_power
                    name: Droger
                    hold_action:
                      action: call-service
                      service: switch.toggle
                      target:
                        entity_id: switch.zigbee3
                state_color: true
                card_mod:
                  style: |-
                    ${ if (X_STATE === 'on') {
                       'ha-card {
                                 --card-mod-icon-color: gold;
                                 height: 120px !important;}'
                     } else {
                       'ha-card {
                                 --card-mod-icon-color: gold;
                                 height: 120px !important;}'
                     }}

without the if then else the icon changes to a color

                card_mod:
                  style: |
                    ha-card {
                      --card-mod-icon-color: gold;
                      height: 120px !important;
                    }
8

This should work for you…

type: glance
show_name: true
show_icon: true
show_state: true
entities:
  - entity: sensor.zigbee3_power
    name: Droger
    hold_action:
      action: call-service
      service: switch.toggle
      target:
        entity_id: switch.zigbee3
    card_mod:
      style: |
        :host {        
          --card-mod-icon-color: {{ (states('light.ac_0e672c2_9') == 'on') | iif('red', 'grey') }};
          height: 120px !important;
             }
9

thanks, gonna try it!