Change icon based on state using Card-mod for entities card

#1

I’m trying to change the icon color based on active or non-active state of the sensor using card-mod.
My current solution does work but that is not based on card-mod

type: entities
entities:
  - entity: binary_sensor.ping_google
    name: Ping Google
    icon: mdi:router-network
  - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: false
    style: |
      :host {
        {% if states(config.entity)=='on' %}
          --paper-item-icon-color: red;
        {% endif %};
       }

image

I’ve gone through 🔹 Card-mod - Add css styles to any lovelace card - #4155 by catchdave
but could find the solution. Also been advised that --paper-item-icon-color is deprecated, although it still works. There is no example of this simple example in GitHub - thomasloven/lovelace-card-mod: 🔹 Add CSS styles to (almost) any lovelace card
Can someone please guide me how to replace above configuration using card-mod ?
This doesn’t work

type: entities
entities:
  - entity: binary_sensor.ping_google
    name: Ping Google
    icon: mdi:router-network
    secondary_info: last-changed
  - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: false
    card_mod:
      style: |
        :host {
          --card-mod-icon-color:
          {% if states(config.entity)=='on' %}
             red
          {% endif %}
            green
        }

Do I have to use ifelse or it it be just active and non-active state icon based statement ?

1 Like
Picture-Elements paper-item-icon-active-color not working on some entities
#2

Hi, try this:

{% if states(config.entity)=='on' %}
  red
{% else %}
  green
{% endif %}
#3

Thanks Blackway, but I want the following to work without ifelse statements:

  - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: true
    card_mod:
      style: |
        :host {
          --paper-item-icon-active-color: red;
          --paper-item-icon-color: green;
        }

Any idea why its not working ? According to this post it should work

#4

This variable is not supported anymore.
Your options:
— use new variables (domain and device_class dependent)
— use direct access to DOM element and a standard “color” css property instead variables.

1 Like
#5

Hi IIdar, I can see that you struggled a lot in this space and then created a post with all the links (thanks for that) but I’m still struggling :frowning:
Are you able to fix what should I replace this to right one ?. The domain is binary_sensor and device_class is ‘connectivity’

I’ve tried the following too

 - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: false
    card_mod:
      style: |
        :host {
          '--state-binary_sensor-on-color': red;
        }

or

  - entity: binary_sensor.tp_link_router_wan_status_2
    name: Wan status
    state_color: true
    card_mod:
      style: |
        :host {
          --state-binary_sensor-connectivity-on-color: '#009800'
        }

:frowning:

#6

I haven’t tried these new variables, cannot give you a ready solution…
Check a huge thread dedicated to new colors in the Configuration / Frontend section.

#7

This is how I worked it out

type: picture-elements
title: Home Lab Test
image: /local/Homelab2.png?v=1"
card_mod:
  style: |
    ha-card {
      --card-mod-icon: mdi:circle;
      --mdc-icon-size: 10px;  
      --state-binary_sensor-on-color: green;
      --state-binary_sensor-off-color: red;
elements:
  - type: state-icon
    entity: binary_sensor.uptimekuma_mikrotik_tower_radio
    style:
      top: 36%
      left: 33%
  - type: state-icon
    entity: binary_sensor.uptimekuma_mikrotik_tower_radio
    style:
      top: 35.8%
      left: 39%
  - type: state-icon
    entity: binary_sensor.uptimekuma_mikrotik_tower_ethernet
    style:
      top: 24%
      left: 36%