Skip to content

Mdi:icon State Chip

Description

example-image

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; ]]]"