Picture Element card using card_mod for state-based icon rotation

I’ve got a picture-elements card configured nicely. I wanted to add custom CSS to get a fan icon rotating, so I’ve installed card-mod. Using this great post as a starting point, I can make an icon (ha-svg-icon) rotate, but I can’t make it state-based.

If I try to add a [data-state="on"] attribute selector to the ha-icon element, it applies too high up in the CSS, and only gets injected if it matches the state at page refresh.

type: picture-elements
image: /local/home.svg
elements:
  - type: state-icon
    entity: switch.fan
    icon: mdi:fan
    tap_action:
      action: toggle
    style:
      top: 17.5%
      left: 6%
    card_mod:
      style:
        state-badge:
          $:
            ha-icon[data-state="on"]:
              $: |
                ha-svg-icon {
                  animation: rotation 2s linear infinite;
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }

If I move the CSS up to the ha-icon, it selectively applies by state in real-time (no refresh required, red background added for testing), but it doesn’t rotate! :sob:

    card_mod:
      style:
        state-badge:
          $: |
            ha-icon[data-state="on"] {
              animation: rotation 2s linear infinite;
              background: red;
            }
            @keyframes rotation {
              0% {
                transform: rotate(0deg);
              }
              100% {
                transform: rotate(360deg);
              }
            }

What am I doing wrong? Why does the ha-icon refuse to rotate, when the ha-icon-svg is happy to?

Better use this post.
The style must be applied if some conditions are met.
What are your conditions?

Thanks @Ildar_Gabdullin.
The examples look similar enough to me, regarding rotating fan icons anyway. My condition is [data-state="on"].

I can rotate the ha-svg-icon element just fine, but it is too far down the DOM to use the data-state on ha-icon. And I can’t rotate the ha-icon.

By condition I mean smth like “states(‘some_entity’) == SMTH”.

Oh, you’re saying I should do the condition check through HA state instead of using a CSS selector for the data attribute? Ok, I’ll have a look into that tomorrow. Never tried it.

Not sure if this is any help but this is how I rotate and change colour based on state

            card_mod:
              style:
                hui-generic-entity-row:
                  $:
                    state-badge:
                      $:
                        ha-icon:
                          $: |
                            ha-svg-icon {
                              color: {{ '#FDD835' if states(config.entity) == 'on' else '#44739E'}};
                              animation:
                              {% if states(config.entity) == 'on' -%}
                                rotation 2s linear infinite;
                              {% else %} null
                              {% endif %}
                            }
                            @keyframes rotation {
                              0% {
                                transform: rotate(0deg);
                              }
                              100% {
                                transform: rotate(360deg);
                              }
                            }
1 Like

Thanks @Holdestmade, that example was great. I found some relevant doco and switched to using is_state().

Just for anyone else, you need quotes around the entity name. This is a snippet of my complete element:

type: picture-elements
image: /local/home.svg
elements:
  - type: state-icon
    entity: switch.fan
    icon: mdi:fan
    tap_action:
      action: toggle
    style:
      top: 17.5%
      left: 6%
    card_mod:
      style:
        state-badge:
          $:
            ha-icon:
              $: |
                ha-svg-icon {
                  {% if is_state('switch.fan', 'on') %}
                    animation: rotation 2s linear infinite;
                  {% endif %}
                }
                @keyframes rotation {
                  0% {
                    transform: rotate(0deg);
                  }
                  100% {
                    transform: rotate(360deg);
                  }
                }