--card-mod-icon stopped working in Entities card

[ildar170975]

My Home Assistant version: 2022.2.0

My lovelace configuration method (GUI or yaml): yaml, storage

What I am doing:
Trying to change an icon using a --card-mod-icon variable.

What I expected to happen:
The icon is changed.

What happened instead:
The icon is NOT changed.

Minimal steps to reproduce:

type: entities
entities:
  - entity: sun.sun
    card_mod:
      style: |
        :host {
          --card-mod-icon: mdi:car;
        }

Error messages from the browser console:
none

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

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

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

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

• 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]

Tested again with 3.1.2.
Then I noticed a strange thing:

1. First I noticed that the icon is changing.
   I even made this test card to post here & close the issue:

type: entities
entities:
  - input_boolean.test_boolean
  - entity: sun.sun
    card_mod:
      style: |
        :host {
          {% if is_state('input_boolean.test_boolean','on') %}
          --card-mod-icon: mdi:car;
          {% else %}
          --card-mod-icon: mdi:account;
          {% endif %}
        }

The icon was changing accordingly to the toggle button.

2. Then I refreshed the page and then I noticed that the icon is not changed.
   Then I could not reproduce my success, the icon was not changing.
   

3. Then I refreshed the page several times.
   After some unsuccessful repeats I see again that the icon is changing...
   

Probably this is some erratic problems with my browser. Closing the issue.

[ildar170975]

I found that the --card-mod-icon stops working (or works sometimes after F5) in case of using a card-mod-theme.

With the default theme or any custom theme w/o card-mod-theme it works stable.
Earlier (#176 (comment)) I described some erratic problems - now I see that they occur ONLY if using card-mod-theme.

Reopened the issue ((

Update 13.02.22:
No, sometimes even with a default theme the --card-mod-icon does not work...

Update 06.04.22:
Checked during last few days - with a default theme the --card-mod-icon works again.
May be because card-mod was updated on April 1, may be due to other reasons...
With a custom theme the --card-mod-icon still does not work.

[wwwescape]

I'm seeing similar behaviors when using custom icons with card mod. This happens when using Simple Icons, FontAwesome, etc.

I am using the default dark theme and have an entities card:

type: entities
show_header_toggle: false
entities:
  - entity: switch.master_bathroom_geyser
    name: Geyser
    icon: fapro:toggle-switch-variant-off2;
    card_mod:
      style: |
        :host {
          {% if is_state('switch.master_bathroom_geyser', 'unavailable') %}
            --card-mod-icon: fapro:toggle-switch-variant-off2;
            # --card-mod-icon-color: #6f6f6f;
            --paper-item-icon-color: #6f6f6f;
          {% elif is_state('switch.master_bathroom_geyser', 'off') %}
            --card-mod-icon: fapro:toggle-switch-variant-off2;
            # --card-mod-icon-color: #44739e;
            --paper-item-icon-color: #44739e;
          {% else %}
            --card-mod-icon: fapro:toggle-switch-variant;
            # --card-mod-icon-color: #73bf69;
            --paper-item-icon-color: #73bf69;
          {% endif %}
        }

When using custom icons, the card loads, the icon shows for a split second, and then disappears. Only after toggling the switch does the icon show properly for its respective states.

When using Material Design Icons, however, there is no such issue:

type: entities
show_header_toggle: false
entities:
  - entity: switch.master_bathroom_geyser
    name: Geyser
    card_mod:
      style: |
        :host {
          {% if is_state('switch.master_bathroom_geyser', 'unavailable') %}
            --card-mod-icon: mdi:light-switch-off;
            # --card-mod-icon-color: #6f6f6f;
            --paper-item-icon-color: #6f6f6f;
          {% elif is_state('switch.master_bathroom_geyser', 'off') %}
            --card-mod-icon: mdi:light-switch-off;
            # --card-mod-icon-color: #44739e;
            --paper-item-icon-color: #44739e;
          {% else %}
            --card-mod-icon: mdi:light-switch;
            # --card-mod-icon-color: #73bf69;
            --paper-item-icon-color: #73bf69;
          {% endif %}
        }

I've also never got --card-mod-icon-color to work.

[ildar170975]

After upgrade to 3.1.5:
Works OK with a default theme.
May not work with a custom card-mod-theme - check #187 (comment)