Lovelace / Picture Elements / state_filter is not working for state-icon

Configuration
1

HA version 2012.12.7

I have open/close binary door sensor and would like to highlight it on Picture Elements map by red circle when the door is opened (“on” sensor state). I tried the following code (defining “on” with single quotes, double quotes and no quotes) - it doesn’t give me red circle in any state:

  - type: state-icon
    entity: binary_sensor.wyzesense_77890df5
    style:
      top: 85%
      left: 85%
    state_filter:
      'on': border(2px solid red) border-radius(100%)

I’ve read picture elements page multiple times and still can’t figure out why state_filter is not working as expected.

What am I doing wrong?

As a side note - the code below gets me permanent solid circle for both states:

 - type: state-icon
    entity: binary_sensor.wyzesense_77890df5
    style:
      top: 85%
      left: 85%
      border: 2px solid red
      border-radius: 100%
2

I asked the same question in the HA Facebook group - below is the code that actually worked. Though having the same sensor defined in 4 different places, especially when you have 10+ sensors, is just a killer… :frowning:

  - type: conditional
    conditions:
      - entity: binary_sensor.wyzesense_77890df5
        state: 'on'
    elements:
      - style:
          top: 85%
          left: 85%
          border: 2px solid red
          border-radius: 100%
        type: state-icon
        title: Test Wyze Sensor 8
        entity: binary_sensor.wyzesense_77890df5
  - type: conditional
    conditions:
      - entity: binary_sensor.wyzesense_77890df5
        state: 'off'
    elements:
      - style:
          top: 85%
          left: 85%
        type: state-icon
        title: Test Wyze Sensor 8
        entity: binary_sensor.wyzesense_77890df5
3

Actually this does not work, at all. He said he needed COLOR to be changed and your code does not change color, maybe there’s a bug or maybe this is by design but the state-icon element does not change color, even when specified within a conditional element. Freaking annoying to say the least.

4

This part creates a round red circle around the element when active, which worked in my tests. But I don’t really like those double definitions, so never implemented them.