Icon color by state

[brandondb1]

Hello, thanks for this great card! I've been trying to build a card that shows the state of a few switches by icon color. Based on examples 11 and 12, it looks like icon color should change by state within the animations section, but I have tried repeatedly and can't get it to work.

I took the sample code for #12 and used it as is, except to replace the entities with my own, and the card shows up with white icons only. The state changes when you click on the icon, and the circle changes per the animations, but the icon stays white.

In the example file, the icon color in the automation section is set to switch from white to primary text color. In the icon section (under layout) the icon color is set to primary text color.

I have changed all of the colors in both the animation and layout/icon sections to red, blue, black and yellow. Only the colors applied in the layout/icon section change anything, but still no change with state.

If I remove the style/color from layout/icons section, the color of the icons reverts to white again, and still no change with state.

Am I doing something wrong, has this functionality been deprecated, or is this a bug? The code is rather long and is literally the Two Bulbs code from the sample file, changed to my entities, and with 'white' changed to 'black' in the icon section of animations. Let me know if you want me to post it anyway.

Thanks in advance!

[brandondb1]

Solved my own issue...

1. agreement of animation_id between layout/icon and animation/icon
2. examples use 'fill' as the style. 'color' worked for me.

[loop2]

I want to change the icon color from green to red following the sensor state... I always obtain a white icon... where is the errore? Thanls a lot!

        icons:
          - id: 5
            entity_index: 5
            xpos: 55
            ypos: 5
            align: end
            size: 0.2
            styles:
              - color: >
                  [[[
                    if (states['sensor.teslafi_lock'].state == 1)
                      return "green"
                    return "red";
                  ]]];;