From 764234f744c38d61daef994ee80add933f446c5f Mon Sep 17 00:00:00 2001
From: Zack Arnett <arnett.zackary@gmail.com>
Date: Tue, 7 Apr 2020 09:03:36 -0400
Subject: [PATCH] Icon pickers (#5453)

---
 .../config-elements/hui-button-card-editor.ts | 20 +++++++++++--------
 .../config-elements/hui-entity-card-editor.ts |  9 ++++++---
 .../config-elements/hui-sensor-card-editor.ts | 14 ++++++++-----
 3 files changed, 27 insertions(+), 16 deletions(-)

diff --git a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
index ace26dfa5f..d0f1299c17 100644
--- a/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-button-card-editor.ts
@@ -10,6 +10,7 @@ import "@polymer/paper-input/paper-input";
 import "../../components/hui-action-editor";
 import "../../components/hui-theme-select-editor";
 import "../../components/hui-entity-editor";
+import "../../../../components/ha-icon-input";
 
 import { struct } from "../../common/structs/struct";
 import {
@@ -23,6 +24,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "./config-elements-style";
 import { ActionConfig } from "../../../../data/lovelace";
 import { ButtonCardConfig } from "../../cards/types";
+import { stateIcon } from "../../../../common/entity/state_icon";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -127,16 +129,18 @@ export class HuiButtonCardEditor extends LitElement
             .configValue="${"name"}"
             @value-changed="${this._valueChanged}"
           ></paper-input>
-          <paper-input
-          .label="${this.hass.localize(
-            "ui.panel.lovelace.editor.card.generic.icon"
-          )} (${this.hass.localize(
+          <ha-icon-input
+            .label="${this.hass.localize(
+              "ui.panel.lovelace.editor.card.generic.icon"
+            )} (${this.hass.localize(
       "ui.panel.lovelace.editor.card.config.optional"
     )})"
-            .value="${this._icon}"
-            .configValue="${"icon"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
+            .value=${this._icon}
+            .placeholder=${this._icon ||
+              stateIcon(this.hass.states[this._entity])}
+            .configValue=${"icon"}
+            @value-changed=${this._valueChanged}
+          ></ha-icon-input>
         </div>
         <div class="side-by-side">
           <ha-switch
diff --git a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
index 7774d217de..0acfa9caa4 100644
--- a/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-entity-card-editor.ts
@@ -10,6 +10,7 @@ import "@polymer/paper-input/paper-input";
 import "../../components/hui-action-editor";
 import "../../components/hui-theme-select-editor";
 import "../../components/hui-entity-editor";
+import "../../../../components/ha-icon-input";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
@@ -19,6 +20,7 @@ import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "./config-elements-style";
 import { EntityCardConfig } from "../../cards/types";
 import { headerFooterConfigStructs } from "../../header-footer/types";
+import { stateIcon } from "../../../../common/entity/state_icon";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -28,7 +30,6 @@ const cardConfigStruct = struct({
   attribute: "string?",
   unit: "string?",
   theme: "string?",
-  header: struct.optional(headerFooterConfigStructs),
   footer: struct.optional(headerFooterConfigStructs),
 });
 
@@ -99,16 +100,18 @@ export class HuiEntityCardEditor extends LitElement
             .configValue=${"name"}
             @value-changed=${this._valueChanged}
           ></paper-input>
-          <paper-input
+          <ha-icon-input
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
             .value=${this._icon}
+            .placeholder=${this._icon ||
+              stateIcon(this.hass.states[this._entity])}
             .configValue=${"icon"}
             @value-changed=${this._valueChanged}
-          ></paper-input>
+          ></ha-icon-input>
         </div>
         <div class="side-by-side">
           <paper-input
diff --git a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
index ed69b36fe6..631b079101 100644
--- a/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-sensor-card-editor.ts
@@ -12,6 +12,7 @@ import "@polymer/paper-listbox/paper-listbox";
 
 import "../../components/hui-theme-select-editor";
 import "../../../../components/entity/ha-entity-picker";
+import "../../../../components/ha-icon-input";
 
 import { struct } from "../../common/structs/struct";
 import { EntitiesEditorEvent, EditorTarget } from "../types";
@@ -20,6 +21,7 @@ import { LovelaceCardEditor } from "../../types";
 import { fireEvent } from "../../../../common/dom/fire_event";
 import { configElementStyle } from "./config-elements-style";
 import { SensorCardConfig } from "../../cards/types";
+import { stateIcon } from "../../../../common/entity/state_icon";
 
 const cardConfigStruct = struct({
   type: "string",
@@ -111,16 +113,18 @@ export class HuiSensorCardEditor extends LitElement
           @value-changed="${this._valueChanged}"
         ></paper-input>
         <div class="side-by-side">
-          <paper-input
+          <ha-icon-input
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.generic.icon"
             )} (${this.hass.localize(
               "ui.panel.lovelace.editor.card.config.optional"
             )})"
-            .value="${this._icon}"
-            .configValue="${"icon"}"
-            @value-changed="${this._valueChanged}"
-          ></paper-input>
+            .value=${this._icon}
+            .placeholder=${this._icon ||
+              stateIcon(this.hass.states[this._entity])}
+            .configValue=${"icon"}
+            @value-changed=${this._valueChanged}
+          ></ha-icon-input>
           <paper-dropdown-menu
             .label="${this.hass.localize(
               "ui.panel.lovelace.editor.card.sensor.graph_type"