Colorful Icon

[sisimomo]

Hi,

I created a template for any "button-card". This template allows you to replace the icon with a custom one, but with a lot more personalization.

Here is an example to show you how to use the template:

- type: custom:button-card
  template:
    - chip_icon_label
    - svg_icon_template
  entity: light.office_lamp
  label: Lamp
  tap_action:
    action: toggle
  variables:
    svg_icon:
      fill_color:
        colored_on: "rgba(var(--color-yellow),1)"
        colored_off: "rgba(var(--color-theme),0.1)"
        not_colored_on: "rgba(var(--color-theme),0.6)"
      path:
        not_colored_on: m 11,15 h 2 v 5 h 5 v 2 H 6 v -2 h 5 z
        not_colored_off: m 11,15 h 2 v 5 h 5 v 2 H 6 v -2 h 5 z
        colored_on: m 8,2 h 8 l 4,12 H 4 L 8,2
        colored_off: m 8,2 h 8 l 4,12 H 4 L 8,2

---

Here is another example to show you how I use the template in my own setup :

📂 dashboard
┣ 📜ui-lovelace.yaml
┣ 📂views
┃ ┣ 📜home.yaml
┃ ┣ 📂svg_icon_path
┃ ┃ ┣ 📂mdi
┃ ┃ ┃ ┗ 📜lamp.yaml

dashboard/ui-lovelace.yaml

---
button_card_templates: !include_dir_merge_named "../../custom_components/ui_lovelace_minimalist/__ui_minimalist__/ulm_templates/"

title: "Minimalist"
background: "var(--background-image)"
views:
  - !include views/home.yaml

dashboard/views/home.yaml

title: "Home"
path: "home"
cards:
  - type: custom:button-card
    template:
      - chip_icon_label
      - svg_icon_template
    entity: light.office_lamp
    label: Lamp
    tap_action:
      action: toggle
    variables:
      svg_icon:
        fill_color:
          colored_on: "rgba(var(--color-yellow),1)"
          colored_off: "rgba(var(--color-theme),0.1)"
          not_colored_on: "rgba(var(--color-theme),0.6)"
        path: !include svg_icon_path/mdi/lamp.yaml

dashboard/views/svg_icon_path/mdi/lamp.yaml

not_colored_on: m 11,15 h 2 v 5 h 5 v 2 H 6 v -2 h 5 z
not_colored_off: m 11,15 h 2 v 5 h 5 v 2 H 6 v -2 h 5 z
colored_on: m 8,2 h 8 l 4,12 H 4 L 8,2
colored_off: m 8,2 h 8 l 4,12 H 4 L 8,2

---

Here is the template:

svg_icon_template:
  custom_fields:
    svg_icon: |
      [[[
        const delay = (ms) => {
          new Promise(res => setTimeout(res, ms));
        }

        const doWithRetry = async (maxAttempts, checkFrequencyInMs, fn) => {
          for (let count = 0; count < maxAttempts; count++){
            try {
              fn(count);
              count = maxAttempts; //don't retry
            } catch(err) {
              // console.log(err);
            }
            if (count < maxAttempts) {
              await delay(checkFrequencyInMs);
            }
          }
        }

        const htmlStringToDomElement = (htmlString) => {
          const placeholder = document.createElement("div");
          placeholder.innerHTML = htmlString;
          return placeholder.firstElementChild;
        }

        const generateSVG = () => {
          if (entity == undefined || (entity.state == "on" || entity.state == "Detected" || entity.state == "ready" || entity.state == "open" || ((!isNaN(parseFloat(entity.state)) && isFinite(entity.state)) ? entity.state > 0 : false ) ||
            (entity.entity_id.startsWith("media_player.") ? entity.state != "off" : false) || (entity.entity_id.startsWith("sensor.") ? entity.state != "0" : false))) {
            return `<svg viewBox="${variables.svg_icon.viewBox.x} ${variables.svg_icon.viewBox.y} ${variables.svg_icon.viewBox.width} ${variables.svg_icon.viewBox.height}">
                      <path fill="${variables.svg_icon.fill_color.colored_on}" d="${variables.svg_icon.path.colored_on}"/>
                      <path fill="${variables.svg_icon.fill_color.not_colored_on}" d="${variables.svg_icon.path.not_colored_on}"/>
                    </svg>`;
          } else {
            return `<svg viewBox="${variables.svg_icon.viewBox.x} ${variables.svg_icon.viewBox.y} ${variables.svg_icon.viewBox.width} ${variables.svg_icon.viewBox.height}" style="vertical-align: middle;">
                      <path fill="${variables.svg_icon.fill_color.colored_off}" d="${variables.svg_icon.path.colored_off}"/>
                      <path fill="${variables.svg_icon.fill_color.not_colored_off}" d="${variables.svg_icon.path.not_colored_off}"/>
                    </svg>`;
          }
        }

        if (variables !== undefined && variables.svg_icon !== undefined && variables.svg_icon.path !== undefined) {
          variables.svg_icon.fill_color = variables.svg_icon.fill_color                                 || {};
          variables.svg_icon.fill_color.colored_on = variables.svg_icon.fill_color.colored_on           || "currentcolor";
          variables.svg_icon.fill_color.colored_off = variables.svg_icon.fill_color.colored_off         || "currentcolor";
          variables.svg_icon.fill_color.not_colored_on = variables.svg_icon.fill_color.not_colored_on   || "rgba(var(--color-theme),0.6)";
          variables.svg_icon.fill_color.not_colored_off = variables.svg_icon.fill_color.not_colored_off || variables.svg_icon.fill_color.not_colored_on;
          variables.svg_icon.viewBox = variables.svg_icon.viewBox                                       || {};
          variables.svg_icon.viewBox.x = variables.svg_icon.viewBox.x                                   || 0;
          variables.svg_icon.viewBox.y = variables.svg_icon.viewBox.y                                   || 0;
          variables.svg_icon.viewBox.width = variables.svg_icon.viewBox.width                           || 24;
          variables.svg_icon.viewBox.height = variables.svg_icon.viewBox.height                         || 24;
          
          let newElement = htmlStringToDomElement(generateSVG());
          doWithRetry(250, 10, (count) => {
            let parent = this.shadowRoot.querySelector("#icon").shadowRoot.querySelector("ha-svg-icon").shadowRoot;
            let actualElement = parent.querySelector("svg");
            parent.replaceChild(newElement, actualElement);
          });
        }

        return undefined;
      ]]]

I was heavily inspired by dmatik's icons in his homeassistant-config.

It is important to understand that the template only edit the icon if the user defines the "svg_icon.path" variable.

I would like this template to be available directly in the project so that anyone can use it. Would you agree that I implement this template on all cards ?

PS. I will take the time to implement the template on each card if there is interest.

Otherwise and in the meantime, do not hesitate to copy the template above to add the functionality to your installation.