From 1f361b7b106c1f2068e155627e867d9ab94230bc Mon Sep 17 00:00:00 2001
From: Bram Kragten <mail@bramkragten.nl>
Date: Wed, 14 Oct 2020 17:01:23 +0200
Subject: [PATCH] Update entity picker (#7343)

---
 src/components/entity/ha-entity-picker.ts | 65 ++++++++++++-----------
 1 file changed, 35 insertions(+), 30 deletions(-)

diff --git a/src/components/entity/ha-entity-picker.ts b/src/components/entity/ha-entity-picker.ts
index 1fc89bb235..396f1ccb49 100644
--- a/src/components/entity/ha-entity-picker.ts
+++ b/src/components/entity/ha-entity-picker.ts
@@ -1,3 +1,4 @@
+import { mdiClose, mdiMenuDown, mdiMenuUp } from "@mdi/js";
 import "@polymer/paper-input/paper-input";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
@@ -20,8 +21,9 @@ import { computeDomain } from "../../common/entity/compute_domain";
 import { computeStateName } from "../../common/entity/compute_state_name";
 import { PolymerChangedEvent } from "../../polymer-types";
 import { HomeAssistant } from "../../types";
-import "../ha-icon-button";
+import "../ha-svg-icon";
 import "./state-badge";
+import "@material/mwc-icon-button/mwc-icon-button";
 
 export type HaEntityPickerEntityFilterFunc = (entityId: HassEntity) => boolean;
 
@@ -206,35 +208,35 @@ export class HaEntityPicker extends LitElement {
           autocorrect="off"
           spellcheck="false"
         >
-          ${this.value && !this.hideClearIcon
-            ? html`
-                <ha-icon-button
-                  aria-label=${this.hass.localize(
-                    "ui.components.entity.entity-picker.clear"
-                  )}
-                  slot="suffix"
-                  class="clear-button"
-                  icon="hass:close"
-                  tabindex="-1"
-                  @click=${this._clearValue}
-                  no-ripple
-                >
-                  Clear
-                </ha-icon-button>
-              `
-            : ""}
+          <div class="suffix" slot="suffix">
+            ${this.value && !this.hideClearIcon
+              ? html`
+                  <mwc-icon-button
+                    .label=${this.hass.localize(
+                      "ui.components.entity.entity-picker.clear"
+                    )}
+                    class="clear-button"
+                    tabindex="-1"
+                    @click=${this._clearValue}
+                    no-ripple
+                  >
+                    <ha-svg-icon .path=${mdiClose}></ha-svg-icon>
+                  </mwc-icon-button>
+                `
+              : ""}
 
-          <ha-icon-button
-            aria-label=${this.hass.localize(
-              "ui.components.entity.entity-picker.show_entities"
-            )}
-            slot="suffix"
-            class="toggle-button"
-            .icon=${this._opened ? "hass:menu-up" : "hass:menu-down"}
-            tabindex="-1"
-          >
-            Toggle
-          </ha-icon-button>
+            <mwc-icon-button
+              .label=${this.hass.localize(
+                "ui.components.entity.entity-picker.show_entities"
+              )}
+              class="toggle-button"
+              tabindex="-1"
+            >
+              <ha-svg-icon
+                .path=${this._opened ? mdiMenuUp : mdiMenuDown}
+              ></ha-svg-icon>
+            </mwc-icon-button>
+          </div>
         </paper-input>
       </vaadin-combo-box-light>
     `;
@@ -270,7 +272,10 @@ export class HaEntityPicker extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-input > ha-icon-button {
+      .suffix {
+        display: flex;
+      }
+      mwc-icon-button {
         --mdc-icon-button-size: 24px;
         padding: 0px 2px;
         color: var(--secondary-text-color);