Card-mod-icon broken in 3.1.5

[Nerwyn]

Home Assistant Core 2022.6.1 Home Assistant Supervisor 2022.05.3 Home Assistant OS 8.1 Home Assistant OS running on VMWare VM on Windows 11

My lovelace configuration method (GUI or yaml): GUI (created card via GUI but then used "show code editor" to edit card yaml)

What I am doing: Using card-mod to change light entity icon based on state.

What I expected to happen: Light entity icon to change based on state (on or off).

What happened instead: Worked correctly in 3.1.4 but broken in 3.1.5. Tested switching back and forth between the versions and clearing browser cache.

Minimal steps to reproduce:

1. Update to card-mod version 3.1.5
2. Create a button card (in my case is within a grid) and link to an entity such light using provided code above.
3. Save and view card. Try toggling the card entity. Note that the icon does not change.

# The least amount of code possible to reproduce my error
show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: light.kitchen_bar
card_mod:
  style: |
    :host {
      --card-mod-icon:
        {% if is_state(config.entity, 'on') %} mdi:ceiling-light-multiple
        {% else %} mdi:ceiling-light-multiple-outline
        {% endif %}
    }
# End of code

Error messages from the browser console:

DevTools failed to load source map: Could not load content for chrome-extension://pccckmaobkjjboncdfnnofkonhgpceea/js/hls.js.map: System error: net::ERR_BLOCKED_BY_CLIENT

Not sure if this is relevant since card-mod loads version 3.1.5 just fine.

---

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]

Theme = default. Content:

1. Toggle on/off
2. F5
3. Toggle on/off

show_name: true
show_icon: true
type: button
tap_action:
  action: toggle
entity: light.bed_light
card_mod:
  style: |
    :host {
      --card-mod-icon:
        {% if is_state(config.entity, 'on') %} mdi:ceiling-light-multiple
        {% else %} mdi:ceiling-light-multiple-outline
        {% endif %}
    }

Then switched to a custom card-mod-theme - same functionality.

[mattdevo1]

I have the same issue. I haven’t tried troubleshooting it too much, but rolling back to 3.1.4 fix it for me too, so I can only assume it’s a bug in 3.1.5.

[Olegz73]

have the same issue. rollback to 3.1.4 fix my problem. Example of my card below:

cards:
  - show_name: true
    show_icon: true
    type: button
    entity: switch.r4s1_kettle_boil
    show_state: true
    name: Чайник
    hold_action:
      action: toggle
    icon_height: 50px
    card_mod:
      style: >
        {% set temp = state_attr("climate.r4s1_kettle_temp",
        "current_temperature") %}

        :host {
          --card-mod-icon:
          {% if temp != None and temp > 90 %}
          mdi:kettle-steam;
          {% else %}
          mdi:kettle;
          {% endif %}
          --card-mod-icon-color:
          {% if temp != None -%}
          hsl(
            {{ 235 + (0 - 235) / (95 - 25) * (temp - 25) }},
            {{ 60 + (100 - 60) / (100 - 25) * (temp - 25) }}%,
            50%
          )
          {%- else -%}
          black
          {%- endif %};
        }
  - type: entities
    entities:
      - entity: climate.r4s1_kettle_temp
        name: Температура
        card_mod:
          style: >
            {% set temp = state_attr("climate.r4s1_kettle_temp",
            "current_temperature") %}

            :host {
              --card-mod-icon:
              {% if temp != None and temp > 90 %}
              mdi:kettle-steam;
              {% else %}
              mdi:kettle;
              {% endif %}
              --card-mod-icon-color:
              {% if temp != None -%}
              hsl(
                {{ 235 + (0 - 235) / (95 - 25) * (temp - 25) }},
                {{ 60 + (100 - 60) / (100 - 25) * (temp - 25) }}%,
                50%
              )
              {%- else -%}
              black
              {%- endif %};
            }

[ildar170975]

Use triple "`" to format your code. Otherwise it looks like a "каша".

[ildar170975]

Check this example with a default theme:

type: vertical-stack
cards:

  - type: entities
    entities:
      - input_boolean.test_boolean_2
      - type: section

      - entity: sun.sun
        name: sun.sun
        card_mod: &ref_style_for_entity_row
          style: |
            :host {
              {% if is_state("input_boolean.test_boolean_2","on") %}
              --card-mod-icon: mdi:kettle-steam;
              --card-mod-icon-color: red;
              {% else %}
              --card-mod-icon: mdi:kettle;
              --card-mod-icon-color: cyan;
              {% endif %}
            }

      - entity: switch.test_switch
        name: switch
        card_mod: *ref_style_for_entity_row

      - entity: input_boolean.test_boolean
        name: input_boolean
        card_mod: *ref_style_for_entity_row

      - entity: light.bed_light
        name: light
        card_mod: *ref_style_for_entity_row

      - entity: sensor.processor_use
        name: sensor
        card_mod: *ref_style_for_entity_row

      - entity: binary_sensor.service_on_value
        name: binary_sensor
        card_mod: *ref_style_for_entity_row

  - type: horizontal-stack
    cards:
      - type: button
        entity: sun.sun
        name: sun.sun
        <<: &ref_settings
          show_name: true
          show_icon: true
          show_state: true
          icon_height: 50px
          card_mod:
            style: |
              ha-card {
                {% if is_state("input_boolean.test_boolean_2","on") %}
                --card-mod-icon: mdi:kettle-steam;
                --card-mod-icon-color: red;
                {% else %}
                --card-mod-icon: mdi:kettle;
                --card-mod-icon-color: cyan;
                {% endif %}
              }

      - type: button
        name: switch
        entity: switch.test_switch
        <<: *ref_settings

      - type: button
        name: input_boolean
        entity: input_boolean.test_boolean
        <<: *ref_settings

  - type: horizontal-stack
    cards:
      - type: button
        name: light
        entity: light.bed_light
        <<: *ref_settings

      - type: button
        name: binary_sensor
        entity: binary_sensor.service_on_value
        <<: *ref_settings

      - type: button
        name: sensor
        entity: sensor.processor_use
        <<: *ref_settings

The card contains Entities card with 6 entities for different domains (sun, switch, input_boolean, light, binary_sensor, sensor) and 6 buttons for these entities. There is no any association between these entities, they are independent.

All entities have SAME card-mod style. Note that for the button card we should use ha-card instead of :host.

Let's play with the card.

On a dashboard view I see this:

In the Editor:

Results: 1) The --card-mod-icon-color & --card-mod-icon vars work fine in the Entities card (as was noted here). 2) These vars work fine with a button card (also see the example with a light entity above) - if the entity is NOT an input_boolean, switch or sensor.

Update: same problems with device_tracker & zone.

---

Now I tested with my custom card-mod-theme:

And these vars do not work for input_boolean, switch and sensor (as was mentioned here).

Update: same problems with device_tracker & zone with a custom card-mod-theme, for the Entities card as well.

[Mariusthvdb]

heck, I just discover this, and was posting in Discord, but yes I confirm this to be happening in my menu bar:

    card-mod-root-yaml: |

      paper-tab[aria-label='Presence'] ha-icon$: |
        ha-svg-icon {
          --card-mod-icon: {{states('sensor.presence_icon')}};
          color: {{states('sensor.presence_color')}};
        }

used to work nicely, but now falls back to the icon defined in the view:

Note the colors do still work and the icon and syntax is unchanged for several months now.. check the button, which uses the exact same sensor for icon and is correct, and color.

Rollback to 3.1.4:

[Mariusthvdb]

If we are in any way hoping Thomas can fix this, we have to help him as much as we can. Some of the posts above are very complex to read and understand with all cross-references and many many examples and screenshots.

We have to help Thomas here analyse the issue, so please also keep the issues short and simple, and as concise as possible, with the least amount of code that produces the issue.

if there are several examples to share, please post them as separates, so each post is about 1 specific aspect of the issue at hand.

[ildar170975]

@Mariusthvdb

1. Be more specific and point at particular posts which you find difficult to read or reproduce. Then advise your own correction for particular points, otherwise it is not productive.
2. Find out a difference between “long-read with mixed independent examples” and “survey covering many possible cases and yet easy to reproduce”.

[Tom-ahawk]

I have the same issue when toggle:

type: entities
entities:
  - entity: input_boolean.test_2
    card_mod:
      style: |
        :host {
          --card-mod-icon:
            {% if is_state('input_boolean.test_2','on') %} 
              -mdi:thumb-up;
             {% elif is_state('input_boolean.test_2','off') %}
               mdi:thumb-down;
            {% endif %}
        }

Browser Brave - latest Home Assistant 2022.10.5 Supervisor 2022.10.0 Operating System 9.2 Frontend 20221010.0 - latest

[ildar170975]

@Tom-ahawk

I have the same issue when toggle:

In case of a default theme and Entities card - an input_boolean DOES work. In case of a custom theme (which you seem to use but did not mention it) - your issue is described here.

[ildar170975]

After update to 3.2.0 the situation became better - but still with issues.

With a default theme:

1. Open a view with a card described here.
2. It looks OK, icons & colors are properly changing dependingly on a toggle: Compare with a situation here - now it works OK.
3. Refresh the page - still displayed OK.
4. Switch to another view.
5. Switch back to the test view - displayed OK.
6. Switch to another view, then refresh this page (F5).
7. Switch back to the test view - displayed OK.

Result - NO ISSUES.

---

With a simple custom theme:

cm_border: ##

  ha-card-border-width: 0px
  ha-card-border-radius: 4px
  ha-card-box-shadow:  0px 2px 1px -1px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 1px 3px 0px rgba(0, 0, 0, 0.12)

Results are same as above. Same results with a custom Noctis theme (w/o card-mod theme code).

Result - NO ISSUES.

---

With a custom theme with card-mode theme code: Results are not OK: After "7. Switch back to the test view..." the view displayed partly WRONG (for Entities card - sun, binary_sensor, light): And then:

8. Switch to another view, then refresh this page (F5).
9. Switch back to the test view - the view still displayed WRONG, check the card on the left:

[Mariusthvdb]

still having reliability issues with the card-mod-icon, now using HA 2022.12 and card-mod 3.2.0

even though the mod I set seems to have been noticed by the Browser:

The wrong icon regularly peeps through, and it's a random process when it finally succeeds. refresh, reload, clear cache, stop and re-open browser etc etc

    card-mod-root-yaml: |

      paper-tab[aria-label='Verwarming'] ha-icon$: |
        ha-svg-icon {
          --card-mod-icon: {% set action = state_attr('climate.front_room','hvac_action') %}
                           {{'mdi:radiator' if action == 'heating' else
                             'mdi:radiator-disabled' if action == 'idle' else
                             'mdi:radiator-off'}};
          color: {% set action =  state_attr('climate.front_room','hvac_action') %}
                 {% set mapper = {'Off':'black',
                                  'Heating':'red',
                                  'Cooling':'blue',
                                  'Auto':'darkgreen'} %}
                 {{mapper[action] if action in mapper else ''}};
        }

Ive also tried with some different style templates:

      paper-tab[aria-label='Verwarming'] ha-icon$: |
        ha-svg-icon {
          --card-mod-icon: {%- set action = state_attr('climate.front_room','hvac_action') -%}
                           {%- set icon = {'heating':'radiator','idle':'radiator-disabled'} -%}
                           mdi:{{icon.get(action,'radiator-off')}};
          color: {% set action =  state_attr('climate.front_room','hvac_action') %}
                 {% set color = {'off':'black','heating':'maroon',
                                  'cooling':'dodgerblue','auto':'darkgreen'} %}
                 {{color.get(action,'')}};
        }

and they do work in dev tools template, but still are a no show in the menu bar. Aware the aria-label might soon be taken out, Id love to keep modding those view icons.

Thomas is there an obvious error we're making here? or:

roll back to 3.1.4 still saves the day:

and I still see the header classes I defined in card-mod-theme. Fingers crossed they will stay like that (and are not in cache somehow)

[Nerwyn]

I'm not sure if/when this was fixed, but it's working for me now. Unless someone else objects I think it can be closed as fixed.

[Mariusthvdb]

no its not fixed, and, as a matter of fact, I still need to run 3.1.4, with some manual fixes:

its too bad really, but changing those icons in the theming requires that version still to be reliable.