How to change icon color

Configuration Frontend
1

The Code below always worked but it stopped creating a red icon when my Fan turns to mode Perm. High.

Who can help me with this.
Sorry but forgot how to put code in the right way.

<

  • entity: sensor.duco_ventilation_mode
    name: Mode
    card_mod:
    style: |
    :host {
    –paper-item-icon-color:
    {% if states(config.entity) == ‘Perm. High’ %} red
    {% else %} var(–paper-item-icon-color)
    {% endif %};
    }
2

Ask your question in English, then you have a better chance of getting an answer.
Please read the forum rules.

4
6

Place it into triple “`” (right below ESC).

7

Assuming your code is an entities card, then this is the working code with one of my sensors.

type: entities
entities:
  - entity: sensor.kodi_cpu_temp
    name: Mode
    card_mod:
      style: |
        :host {
          --paper-item-icon-color: 
            {% if states(config.entity) | float(0) <= 50 %}
              var(--paper-item-icon-color);
            {%else%}
              red;
            {% endif %}
        }

image

If it is a different card type then this will not work obviously.

8

Suggest you to not use this syntax (and not advise it).

type: entities
entities:
  - entity: sensor.kodi_cpu_temp
    name: Mode
    card_mod:
      style: |
        :host {
          {% if ... -%}
          --paper-item-icon-color: green;
          {%- else -%}
          --paper-item-icon-color: red;
          {%- endif %}
        }

More flexible. Less space in DOM.
P.S. Happy NY btw. Although it started with attacks from russians & hamas.

9

I know you did and I intentionally did not follow you because it is not the final code for @broekieman.and his code is formated that way so it is easier for him to compare and adjust.

1 Like
10

Agree. But we should “direct” beginners to better ways. As we were ourselves some time ago.

11

btw - this will not work.

--paper-item-icon-color: var(--paper-item-icon-color);

if no need to change the variable - just do not change.

12

Really? It seems to work because it was the original icon color in my tests, but maybe because it is not understood :slight_smile:

13

check this similar

14

Then, indeed, you’re right, as there should be no code to keep the original color, then it is better to use the full syntax:

type: entities
entities:
  - entity: sensor.duco_ventilation_mode
    name: Mode
    card_mod:
      style: |
        :host {
          {% if ... -%}
          --paper-item-icon-color: red;
          {%- endif %}
        }
15

right, w/o assigning the current value.

16

This is my card :slight_smile:

type: glance
entities:

  • entity: binary_sensor.sensor_badkamer_occupancy
    name: Zone
    icon: mdi:motion-sensor

  • entity: sensor.duco_ventilation_mode
    name: Mode
    card_mod:
    style: |
    :host {
    {% if states(config.entity) == ‘Perm.High’ %}
    –paper-item-icon-color: red;

        {% endif %};
    }
17

Can anyone help me to change color to Red when mode is Perm high?

18

Your code is unreadable, it is difficult to help you.

The solution is in front of your eyes in post #12, you are not using the right tag.
it is
--paper-item-icon-color: red;
not
–paper-item-icon-color: red;

But might be a different issue, but impossible to tell as the indentation is screwed up not using the code formating.

19

Must have gone wrong with paste. I have:

        --paper-item-icon-color: red;

This did not solve the problem. What can I try more?

20

As it was already suggested - fix your post first.
Can’t you see yourself that it is unreadable?

1 Like