Apply color and animation to state-icon doesn’t take effect

Configuration Frontend
1

Hello everyone,

I’m trying to add a blinking red icon to a picture-elements card that only appears when an entity is on. I’m using a conditional element for this.

I’ve tried a few different card_mod approaches, but none of them seem to apply the color or animation to the state-icon element. The icon itself shows up correctly, but the styling doesn’t take.

Here is the code I’m currently using:

type: picture-elements
image: /local/your_image.png
elements:
  - type: conditional
    conditions:
      - condition: state
        entity: binary_sensor.anti_legionella_active
        state: "on"
    elements:
      - entity: binary_sensor.anti_legionella_active
        title: Anti-legionella running
        type: state-icon
        style:
          font-size: 100%
          left: 75%
          top: 83%
        card_mod:
          style:
            ha-state-icon:
              $:
                ha-icon:
                  $: |
                    ha-svg-icon {
                      color: #f44336;
                      animation: blink 1s linear infinite;
                    }
                    @keyframes blink {
                      0%, 50%, 100% { opacity: 1; }
                      25%, 75% { opacity: 0; }
                    }
2

Cardmod should be applied on the conditional element level, not on a sub element level. Go to main cardmod thread - 1st post - fantastic link at the bottom - picture elements - conditional

3

Hi @Ildar_Gabdullin : thank you for your reply!
Didn’t manage to make it work with conditional so did card-mod with state-icon and use css to show/hide the icon.