3.2.2 does not change icon in views via card-mod-theme

[Mariusthvdb]

My Home Assistant version: 2023.4.6

My lovelace configuration method (GUI or yaml): Yaml

What I am doing:

changing an icon in the view tabs via a template. This has been working up to and including 3.1.4. All updates after that broke this functionality, and there are some other posts in this repo on that.
Maybe the syntax was changed, but no reponse in the community either in that, so for now have to consider it an issue.
Since 2023.4 forces us to update (or manually edit the resource, whihc I have done, and which does indeed still work...) I figured a new issue was useful

What I expected to happen:

have the icon change

What happened instead:

Icon does not change
Minimal steps to reproduce:

# The least amount of code possible to reproduce my error
  card-mod-root-yaml: |

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

    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')}};
      }

Error messages from the browser console:

No errors, except the ominous double:

which appears although I have set the card via the frontend extra_module_url method

Please have a look if this is a user error, or can be fixed.
thanks!

related to an earlier issue at #206 (comment)

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.

[Mariusthvdb]

just had another check on this, and, I can see this mod:

    paper-tab[aria-label='Beweging'] ha-icon$: |
      ha-svg-icon {
        --card-mod-icon: {{'mdi:motion-sensor' if is_state('binary_sensor.motion_sensors_all','on') else
                           'mdi:motion-sensor-off'}};
        color: {{'red' if is_state('binary_sensor.motion_sensors_all','on')}};
      }

being applied to the sensor in the inspector

on:

off:

and yes, the color is changing to red when 'on', the icon remains untouched.

back to edited 3.1.4 + fix

[Mariusthvdb]

just asking for some consideration here, because today we were confronted with the 2023.10.0b3 and that breaks card_mod (filed an issue on it) and made me remember why I still use 3.1.4 with a fix, and not the latest 3.2.2.

Truly would wish he card_mod icon issue here could be resolved, so we can finally start using 3.2.2 to its full capacity

[Mariusthvdb]

finally made it happen... turns out I the mod above working 3.1.4, had to be changed into the mod I used before we had card-mod-icon...

what works is:

  card-mod-root-yaml: |

    paper-tab[aria-label='Weer'] ha-icon$: |
      ha-svg-icon {
        animation: {{'blink 2s ease infinite' if
                     is_state('binary_sensor.meteoalarm_brabant','on') else 'none'}};
      }
      @keyframes blink {
        50% {opacity: 0.2;}
      }


    .: |

      paper-tab[aria-label='Weer'] {
        --card-mod-icon: {%- if is_state('binary_sensor.meteoalarm_brabant','on') %}
                         {{states('sensor.meteoalarm_icon')}}
                         {%- else %} {{states('sensor.weather_icon')}}
                         {%- endif %};
        color: {{'maroon' if is_state('binary_sensor.meteoalarm_brabant','on')
                  else states('sensor.temperature_color_name')}};
      }

card-mod-icon now is nicely updated again. Reason I split the mod up is that by applying the animation to the ha-svg-icon element, it is only the icon that will be animated.

We can also set the animation in the .: | section, but then anime,ation is applied to the whole icon placeholder of the tav view, and, depending on you background that seems a bit odd.

closing as the issue is no longer an issue ;-)