Change Dashboard Card icon color

A bit advanced version:

type: entities
entities:
  - entity: input_number.test_level_1
    name: cyan
    icon: mdi:circle
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $ ha-svg-icon $: |
          svg {
              fill: rgba(0,255,255,{{states(config.entity)|float/100}});
              stroke: var(--state-icon-color);
            }

  - entity: input_number.test_level_4
    name: magenta
    icon: mdi:circle
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $ ha-svg-icon $: |
          svg {
              fill: rgba(255,0,255,{{states(config.entity)|float/100}});
              stroke: var(--state-icon-color);
            }

  - entity: input_number.test_level_5
    name: yellow
    icon: mdi:circle
    card_mod:
      style:
        hui-generic-entity-row $ state-badge $ ha-state-icon $ ha-icon $ ha-svg-icon $: |
          svg {
              fill: rgba(255,255,0,{{states(config.entity)|float/100}});
              stroke: var(--state-icon-color);
            }

image

image

5 Likes