The icon does not change and only the eye is displayed

Configuration Frontend
1

Hello,
I have the meter values in the overview and would like to change the color as well as the icon at the state: sensor.evu_current_power depending on the current power consumption.
The coloring of the text works so far. However, the icon does not change and only the eye is displayed.
What am I doing wrong here?
Thanks a lot
image

The Config:

type: entities
entities:
  - entity: sensor.evu_zahler_export
    icon: mdi:transmission-tower-export
  - entity: sensor.evu_zahler_import
    icon: mdi:transmission-tower-import
  - entity: sensor.evu_aktuelle_leistung
    icon_template: >
      {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
        mdi:transmission-tower-import
      {% else %}
        mdi:transmission-tower-export
      {% endif %}
    card_mod:
      style: |
        :host {
          color: {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
            red;
          {% else %}
            green;
          {% endif %}
          font-weight: bold;
          }
title: EVU Werte
state_color: true
footer:
  type: graph
  entity: sensor.evu_aktuelle_leistung
  hours_to_show: 6
  detail: 2
2

Changing icon color is by using the --paper-item-icon-color tag

      style: |
        :host {
          --paper-item-icon-color:...

Like so in your exemple:

    card_mod:
      style: |
        :host {
          color: 
            {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
              red
            {% else %}
              green
            {% endif %};
          font-weight: bold;
          --paper-item-icon-color: 
            {% if ('sensor.evu_aktuelle_leistung') | float > 0 %}
              red
            {% else %}
              green
            {% endif %};

For the icon, I think that there is no other choice than to setup a template that encapsulate your sensor.

  - platform: template
    sensors:
      evu_aktuelle_leistung_templated:
        friendly_name: EVU aktuelle Leistung
        value_template: "{% states('sensor.evu_aktuelle_leistung') %}"
        icon_template: >
          {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
            mdi:transmission-tower-import
          {% else %}
            mdi:transmission-tower-export
          {% endif %}

And use it in your entity card instead of sensor.evu_aktuelle_leistung

3

You are trying to use an option which does not belong to Entities card.

4

Check card-mod and “—card-mod-icon” variable.

6

You’re correct.

However, I tend to lean towards official solutions whenever possible because they are typically more sustainable in the long run.

I only resort to using card-mod when there are no native options available.

It’s frustrating how often I’ve had to update my card-mod configurations due to changes in the underlying CSS.

7

Depends on a particular card-mod code.

8

@Ildar_Gabdullin
Thanks for the help.
This is how it works now. At the same time I have also colored the icon.
Is there a way to bundle options here? Currently with this solution I have to do the same query for each option.
Thanks a lot

type: entities
entities:
  - entity: sensor.evu_zahler_export
    icon: mdi:transmission-tower-export
  - entity: sensor.evu_zahler_import
    icon: mdi:transmission-tower-import
  - entity: sensor.evu_aktuelle_leistung
    icon_template: |-
      {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
        mdi:transmission-tower-import
      {% else %}
        mdi:transmission-tower-export
      {% endif %}
    card_mod:
      style: |
        :host {
          color: {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
            red;
          {% else %}
            green;
          {% endif %}
          
          --card-mod-icon: {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
            mdi:transmission-tower-import;
          {% else %}
            mdi:transmission-tower-export;
          {% endif %}

          --card-mod-icon-color: {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
            red;
          {% else %}
            green;
          {% endif %}
          
          font-weight: bold;
          }
title: EVU Werte
state_color: true
footer:
  type: graph
  entity: sensor.evu_aktuelle_leistung
  hours_to_show: 6
  detail: 2
9
10

Already told you - this is wrong, check above, unsupported option.

11

Also, instead of using css variables “-color” you may explicitly change particular css properties for particular Dom elements. Go to huge card mod thread → 1st post for details.

Also, about changing an icon. If you need to change an icon for this entity EVERYWHRE (not in some particular card) - consider either a templated icon (if this is a template sensor) or a Custom UI (for other entities).

12

tbh, a power sensor should really just get device_class: power and probably a state_class: measurement if you want Long term stats (LTS) on it.

it will auto set the correct power icon because of the device_class.

no required custom (card_mod/custom-ui) settings at all for that. core does it all on those.

if you really want the templates to change them, then yes, you the template also on the icon:
which is really easy when using a core template entity, but this apparently isnt.

your next options are templating dashboard cards (also custom, because core does not support that)

or use custom-ui which is very powerful, I’d be glad to help you out, but need you to be sure you want it, I am reluctant to advise you to use custom-ui. its great, but can break upon each and every update of core. We just had an update to fix the Dom path in more-info… so no promises made

13

Sorry, I have correct it :wink:

14

This is the final code:

type: entities
entities:
  - entity: sensor.evu_zahler_export
    icon: mdi:transmission-tower-export
  - entity: sensor.evu_zahler_import
    icon: mdi:transmission-tower-import
  - entity: sensor.evu_aktuelle_leistung
    icon: |-
      {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
        mdi:transmission-tower-import
      {% else %}
        mdi:transmission-tower-export
      {% endif %}
    card_mod:
      style: |
        :host {
          {% if states('sensor.evu_aktuelle_leistung') | float > 0 %}
           color: red; --card-mod-icon: mdi:transmission-tower-import; --card-mod-icon-color: red;
          {% else %}
            color: green; --card-mod-icon: mdi:transmission-tower-export; --card-mod-icon-color: green;
          {% endif %}
          
          font-weight: bold;
          }
title: EVU Werte
state_color: true
footer:
  type: graph
  entity: sensor.evu_aktuelle_leistung
  hours_to_show: 6
  detail: 2
15

Icon option does not support templates.