Picture elements icon configuration

Configuration Frontend
1

Hi,

On my Dashboard I want to show the icon of a light entity always in white when it is turned on. I worked through different posts but couldn’t get it to work. At the moment the icon shows the current light color.

- type: state-icon
            icon: mdi:lightbulb-group
            entity: light.wohnzimmer_lichtgruppe
            action: none
            tap_action:
              action: toggle
            hold_action: none
            style:
              top: 23%
              left: 76.2%
              transform: translate(-50%, -50%) scale(1.3, 1.3)
              '--paper-item-icon-color': black

Another problem is that I want a binary_sensor to be black when the status is “off” with an opacity of 0.2. I didn’t get the opacity to work based on the status.

- type: state-icon
            icon: mdi:motion-sensor
            entity: binary_sensor.wohnzimmer_bewegung
            action: none
            tap_action: none
            hold_action: none
            style:
              top: 23%
              left: 80.5%
              transform: translate(-50%, -50%) scale(1.1, 1.1)
              '--state-binary_sensor-off-color': black
              '--state-binary_sensor-on-color': white
              opacity: 0.2

Thanks for your help.

2

Hello!
If you would like ALL lights to be white when on and ALL binary_sensors to be black and faded when when off, then I recommend a custom theme: Home Assistant frontend - Home Assistant

If you’d just like to have these things apply on these specific cards, you can try something like this:

Modified Example 1 
- type: state-icon
            icon: mdi:lightbulb-group
            entity: light.wohnzimmer_lichtgruppe
            action: none
            tap_action:
              action: toggle
            hold_action: none
            style:
              top: 23%
              left: 76.2%
              transform: translate(-50%, -50%) scale(1.3, 1.3)
              '--state-light-on-color': black

Important Information about Example 2:
This example uses two conditional state-icons in order to apply the opacity only when the sensor is off. This may not be the most elegant solution (and probably won’t work if the sensor is unknown or unavaliable) but it should help you get closer to a solution.

Modified Example 2 
  - type: conditional
    conditions:
      - entity: binary_sensor.wohnzimmer_bewegung
        state: 'off'
    elements:
      - type: state-icon
        icon: mdi:motion-sensor
        entity: binary_sensor.wohnzimmer_bewegung
        action: none
        tap_action: none
        hold_action: none
        style:
          top: 23%
          left: 80.5%
          transform: translate(-50%, -50%) scale(1.1, 1.1)
          '--state-binary_sensor-off-color': black
          '--state-binary_sensor-on-color': white
          opacity: 0.2
  - type: conditional
    conditions:
      - entity: binary_sensor.wohnzimmer_bewegung
        state: 'on'
    elements:
      - type: state-icon
        icon: mdi:motion-sensor
        entity: binary_sensor.wohnzimmer_bewegung
        action: none
        tap_action: none
        hold_action: none
        style:
          top: 23%
          left: 80.5%
          transform: translate(-50%, -50%) scale(1.1, 1.1)
          '--state-binary_sensor-off-color': black
          '--state-binary_sensor-on-color': white
3

Thank you. Conditional works perfect for all kind of entities (binary_sensor, input_boolean, input_number,…) but not for light entity. I couldn’t get the icon only shine white. :confused:

This does not work

- type: conditional
            conditions:
              - entity: light.wohnzimmer_lichtgruppe
                state: 'on'
            elements:
              - type: state-icon
                icon: mdi:lightbulb-group
                entity: light.wohnzimmer_lichtgruppe
                action: none
                tap_action:
                  action: toggle
                hold_action: none
                style:
                  top: 22.9%
                  left: 76.3%
                  transform: translate(-50%, -50%) scale(1.3, 1.3)
                  '--paper-item-icon-color': white
                  '--state-light-on-color': white
                  '--state-icon-on-color': white