From b6f59d3c984aae2e7fafce4f2d31da76700cba0a Mon Sep 17 00:00:00 2001
From: Paulus Schoutsen <balloob@gmail.com>
Date: Thu, 1 Apr 2021 11:28:56 -0700
Subject: [PATCH] Fix the automation picker icons (#8790)

---
 .../config/automation/ha-automation-picker.ts | 62 +++++++++++--------
 1 file changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/panels/config/automation/ha-automation-picker.ts b/src/panels/config/automation/ha-automation-picker.ts
index b12675425b..f6d8834fa6 100644
--- a/src/panels/config/automation/ha-automation-picker.ts
+++ b/src/panels/config/automation/ha-automation-picker.ts
@@ -1,5 +1,12 @@
 import "@material/mwc-icon-button";
-import { mdiHelpCircle, mdiPlus } from "@mdi/js";
+import {
+  mdiHelpCircle,
+  mdiHistory,
+  mdiInformationOutline,
+  mdiPencil,
+  mdiPencilOff,
+  mdiPlus,
+} from "@mdi/js";
 import "@polymer/paper-tooltip/paper-tooltip";
 import {
   CSSResult,
@@ -148,14 +155,15 @@ class HaAutomationPicker extends LitElement {
         title: "",
         type: "icon-button",
         template: (_info, automation) => html`
-          <ha-icon-button
+          <mwc-icon-button
             .automation=${automation}
             @click=${this._showInfo}
-            icon="hass:information-outline"
-            title="${this.hass.localize(
+            .label="${this.hass.localize(
               "ui.panel.config.automation.picker.show_info_automation"
             )}"
-          ></ha-icon-button>
+          >
+            <ha-svg-icon .path=${mdiInformationOutline}></ha-svg-icon>
+          </mwc-icon-button>
         `,
       };
       columns.trace = {
@@ -169,13 +177,14 @@ class HaAutomationPicker extends LitElement {
                 : undefined
             )}
           >
-            <ha-icon-button
-              icon="hass:graph-outline"
-              .disabled=${!automation.attributes.id}
-              title="${this.hass.localize(
+            <mwc-icon-button
+              .label=${this.hass.localize(
                 "ui.panel.config.automation.picker.dev_automation"
-              )}"
-            ></ha-icon-button>
+              )}
+              .disabled=${!automation.attributes.id}
+            >
+              <ha-svg-icon .path=${mdiHistory}></ha-svg-icon>
+            </mwc-icon-button>
           </a>
           ${!automation.attributes.id
             ? html`
@@ -199,25 +208,26 @@ class HaAutomationPicker extends LitElement {
                 : undefined
             )}
           >
-            <ha-icon-button
-              .icon=${automation.attributes.id
-                ? "hass:pencil"
-                : "hass:pencil-off"}
+            <mwc-icon-button
               .disabled=${!automation.attributes.id}
-              title="${this.hass.localize(
+              .label="${this.hass.localize(
                 "ui.panel.config.automation.picker.edit_automation"
               )}"
-            ></ha-icon-button>
+            ><ha-svg-icon .path=${
+              automation.attributes.id ? mdiPencil : mdiPencilOff
+            }></ha-svg-icon>
           </a>
-          ${!automation.attributes.id
-            ? html`
-                <paper-tooltip animation-delay="0" position="left">
-                  ${this.hass.localize(
-                    "ui.panel.config.automation.picker.only_editable"
-                  )}
-                </paper-tooltip>
-              `
-            : ""}
+          ${
+            !automation.attributes.id
+              ? html`
+                  <paper-tooltip animation-delay="0" position="left">
+                    ${this.hass.localize(
+                      "ui.panel.config.automation.picker.only_editable"
+                    )}
+                  </paper-tooltip>
+                `
+              : ""
+          }
         `,
       };
       return columns;