Mdi:icon State Chip

Description

This chip displays an icon using mdi and state of the chosen entity.

Variables

Variable	Default	Required	Notes
ulm_chip_mdi_icon_state_entity			entity to link
ulm_chip_mdi_icon_state_icon			mdi:icon to display
ulm_chip_mdi_icon_state_icon_color	primary-text-color		Allow to change icon color
ulm_chip_mdi_icon_state_label_color	primary-text-color		Allow to change label color

Usage

- type: "custom:button-card"
  template: chip_mdi_icon_state
  variables:
    ulm_chip_mdi_icon_state_entity: light.kitchen_lights
    ulm_chip_mdi_icon_state_icon: mdi:lightbulb

Template Code

chip_mdi_icon_state.yaml

---
### Chip Mdi Icon State ###
chip_mdi_icon_state:
  template: "chips"
  tap_action:
    action: "more-info"
  entity: "[[[ return variables.ulm_chip_mdi_icon_state_entity ]]]"
  triggers_update:
    - "[[[ return variables.ulm_chip_mdi_icon_state_entity ]]]"
  show_icon: true
  icon: "[[[ return variables.ulm_chip_mdi_icon_state_icon ]]]"
  label: |
    [[[
      var state = "";
      if (states[variables.ulm_chip_mdi_icon_state_entity].state){
        var state = helpers.localize(entity)
      }
      return state;
    ]]]
  styles:
    grid:
      - grid-template-areas: "'i l'"
    icon:
      - color: "[[[ return variables.ulm_chip_mdi_icon_state_icon_color; ]]]"
    label:
      - color: "[[[ return variables.ulm_chip_mdi_icon_state_label_color; ]]]"