Change Icon for badge based on a condition

1

Hi
I would like to change the badge icon based on the value like i did for the colour here below:

badges:
  - entity: binary_sensor.xiaomidoorhomestate
    icon: 'mdi:door-open'
    style: |
      :host {
        --label-badge-blue: {% if is_state('binary_sensor.xiaomidoorhomestate', 'off') %} green {% else %} red {% endif %};
      }

how can i change icon from "door open " to “door closed”?

thanks

1 Like
2

This answers your question but I doubt that is what you really want.
icon: mdi:door-closed

You probably want to look into icon templates or ‘device class: door might work’ for you
The MDI Icons
Icon Template
If you do the templating or the device class on the binary sensor, make sure you remove the icon line in your badge.

3

that’s not what i need, i mean i know which icon to use, i need to use an icon based on a state like i did for the color in the Style. In other words i need to have like:(this below doesn-t work)

badges:

  • entity: binary_sensor.xiaomidoorhomestate
    icon: {% if is_state(‘binary_sensor.xiaomidoorhomestate’, ‘off’) %} mdi:door-closed {% else %} mdi:door-open {% endif %};
    style: |
    :host {
    –label-badge-blue: {% if is_state(‘binary_sensor.xiaomidoorhomestate’, ‘off’) %} green {% else %} red {% endif %};
    }
4

You need to customize the device class which can be done on the binary sensor set up or after in cusomize.yaml
https://www.home-assistant.io/docs/configuration/customizing-devices/
The device class handles changing icon based on state for you. I use it extensively, I mainly set device class in my sensor and binary_sensor yaml configs.

5

@mtosin could you workaround this? I am looking for the same implementation

6

@PX80 this is what i did

  • type: conditional
    conditions:
    • entity: binary_sensor.garage_apertura
      state: ‘on’
      elements:
    • type: state-label
      entity: sensor.garagemovimento
      suffix: ’ ’
      prefix: 'Garage: ’
      style:
      top: 22%
      left: 85%
      background-color: rgba(255, 0, 0, 4.5)
      border-radius: 40px
      font-size: 20px
      animation: var(–my-blink)
  • type: conditional
    conditions:
    • entity: binary_sensor.garage_apertura
      state: ‘off’
      elements:
    • type: state-label
      entity: sensor.garagemovimento
      suffix: ’ ’
      prefix: 'Garage: ’
      style:
      top: 22%
      left: 85%
      color: black
      background-color: rgba(0, 255, 0, 4.5)
      border-radius: 40px
      image: local/img/dom/pianterrenoBig.jpg
      type: picture-elements
      style: |
      @keyframes rotate {
      0% { transform: rotate(0deg); }
      25% { transform: rotate(90deg); }
      50% { transform: rotate(180deg); }
      75% { transform: rotate(270deg); }
      100% { transform: rotate(360deg); }
      }

@keyframes blink {
to {
visibility: hidden;
background-color: yellow;
}
}
ha-card {
–my-rotate: {% if is_state(‘binary_sensor.garage_apertura’, ‘off’) %} rotate 0.5s infinite {% endif %};
–my-blink: {% if is_state(‘binary_sensor.garage_apertura’, ‘on’) or is_state(‘binary_sensor.garage_apertura’, ‘on’)%} blink 0.5s steps(5, start) infinite {% endif %};
};