Glance Card | Change Icon Color based on state

Configuration
1

Haven’t been able to find a way to manually change the color of an icon (or use custom image) on a glance card based on state, tried this, but no luck:

  - type: glance
    title: Alarm
    show_name: false
    entities:
      - entity: alarm_control_panel.alarm_com
        icon: mdi:shield-home
        entity_picture_template: >-
          {% if is_state('alarm_control_panel.alarm_com', 'armed_away') %}
            /local/shield-home-away.png
          {% else if is_state('alarm_control_panel.alarm_com', 'armed_stay') %}
            /local/shield-home-stay.png
          {% else %}
            /local/shield-home-disarmed.png
          {% endif %}
2

OK, ended up creating a simple sensor to display / change icons - but seems like a great feature-add to be able to do this right on the glance card vs. having to create ancillary items (a sensor in this case).

- platform: template
  sensors:
  alarm_dot_com_sensor:
  friendly_name: "Alarm.com Sensor"
  value_template: >-
    {% if is_state('alarm_control_panel.alarm_com', 'armed_away') %}
      Armed Away
    {% elif is_state('alarm_control_panel.alarm_com', 'armed_stay') %}
      Armed Stay
    {% else %}
      Disarmed
    {% endif %}  
  entity_picture_template: >-
    {% if is_state('alarm_control_panel.alarm_com', 'armed_away') %}
      /local/shield-home-away.png
    {% elif is_state('alarm_control_panel.alarm_com', 'armed_stay') %}
      /local/shield-home-stay.png
    {% else %}
      /local/shield-home-disarmed.png
    {% endif %}

*Indentation off above

3

You can do something similar using a custom button card. Lovelace: Button card

      - type: "custom:button-card"
        entity: alarm_control_panel.security_system_partition_1
        icon: mdi:alarm-bell
        color_type: icon
        size: 20%
        name: Alarm
        style:
          - font-size: 12px
          - font-weight: bold
        action: more_info
        show_state: true
        state:
          - value: 'armed_home'
            color: rgb(255, 5, 5)
          - value: 'armed_away'
            color: rgb(255, 5, 5)
          - value: 'disarmed'    
            color: rgb(5, 147, 255)
1 Like