changing icon color by sensor state sometimes not working

[Schampanja]

Hi, I am David and i think i have a Issue or a little bug. here comes the discription:

My Home Assistant version: 2022.10.5

My lovelace configuration method (GUI or yaml): yaml

What I am doing: I want to change the Color of an icon by the value of a input_select Sometimes it works, sometimes not. I checked the state of the input_select in de dev tools an it is correct.

What I expected to happen: when the state of the input select ist "läuft" (german for "running" the icon shold be green). Sometimes it works, sometimes not. Sometimes i have the feeling, that it works more often when I open the card locally on my home network and not vie the internet. But i think that should not be relevant for these CSS things.

What happened instead: nothing, icon is white

Minimal steps to reproduce:

here is my yaml code:

# The least amount of code possible to reproduce my error
type: glance
entities:
  - entity: input_select.washing_machine_status
    card_mod:
      style: |
        :host {
           --paper-item-icon-color:
           {% if states('input_select.washing_machine_status') == 'läuft' %}
              #3ef705;
           {% endif %}
          }
  - entity: input_select.dryer_status
    card_mod:
      style: |
        :host {
          --paper-item-icon-color:
          {% if states('input_select.dryer_status') == 'läuft' %}
             #3ef705;
          {% endif %}
          }
  - entity: input_select.dish_washer_status
    card_mod:
      style: |
        :host {
           --paper-item-icon-color:
           {% if states('input_select.dish_washer_status') == 'läuft' %}
              #3ef705;
           {% endif %}
          }
# End of code

Error messages from the browser console: no error message

By putting an X in the boxes ([]) below, I indicate that I:

• [x] Understand that this is a channel for reporting bugs, not a support forum (https://community.home-assistant.io/).

• [X] Have made sure I am using the latest version of the plugin.

• [X] Have followed the troubleshooting steps of the "Common Problems" section of https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins.

• [X] Understand that leaving one or more boxes unticked or failure to follow the template above may increase the time required to handle my bug-report, or cause it to be closed without further action.

[ildar170975]

1. I strongly suggest to ask similar questions in the HA Community () and leave GitHub for bugs, FRs, PRs. There are plenty of examples (1st post -> link at the bottom), also you will get feedback faster.

2. The code:

   card_mod:
     style: |
       :host {
          --paper-item-icon-color:
          {% if states('input_select.washing_machine_status') == 'läuft' %}
             #3ef705;
          {% endif %}
         }

   is not 100% correct. If the condition is not "true" -> then you will get:

       :host {
          --paper-item-icon-color:
         }

   which causes an error. This error is not harmful - unless you have something like this:

       :host {
          --paper-item-icon-color:
          {% if states('input_select.washing_machine_status') == 'läuft' %}
             #3ef705;
          {% endif %}
          some_other_property: some_value;
         }

   which causes:

       :host {
          --paper-item-icon-color:
          some_other_property: some_value;
         }

   and both styles are not applied.

So, change it like this:

        :host {
           {% if states('input_select.washing_machine_status') == 'läuft' %}
           --paper-item-icon-color: #3ef705;
           {% endif %}
          }

3. As for 'läuft' - are these special characters handled properly?

4. Also - always test it with a default theme (just in case).