Add icons when adding integration (#5500)

* Add icons when adding integration

* Remove margin from search input and put in parent

src/common/search/search-input.ts

@@ -34,29 +34,27 @@ class SearchInput extends LitElement {
           }
         }
       </style>
-      <div class="search-container">
-        <paper-input
-          class=${classMap({ "no-underline": this.noUnderline })}
-          autofocus
-          label="Search"
-          .value=${this.filter}
-          @value-changed=${this._filterInputChanged}
-          .noLabelFloat=${this.noLabelFloat}
-        >
-          <ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
-          ${this.filter &&
-            html`
-              <paper-icon-button
-                slot="suffix"
-                class="suffix"
-                @click=${this._clearSearch}
-                icon="hass:close"
-                alt="Clear"
-                title="Clear"
-              ></paper-icon-button>
-            `}
-        </paper-input>
-      </div>
+      <paper-input
+        class=${classMap({ "no-underline": this.noUnderline })}
+        autofocus
+        label="Search"
+        .value=${this.filter}
+        @value-changed=${this._filterInputChanged}
+        .noLabelFloat=${this.noLabelFloat}
+      >
+        <ha-icon icon="hass:magnify" slot="prefix" class="prefix"></ha-icon>
+        ${this.filter &&
+          html`
+            <paper-icon-button
+              slot="suffix"
+              class="suffix"
+              @click=${this._clearSearch}
+              icon="hass:close"
+              alt="Clear"
+              title="Clear"
+            ></paper-icon-button>
+          `}
+      </paper-input>
     `;
   }
 
@@ -74,16 +72,7 @@ class SearchInput extends LitElement {
 
   static get styles(): CSSResult {
     return css`
-      paper-input {
-        flex: 1 1 auto;
-        margin: 0 16px;
-      }
-      .search-container {
-        display: inline-flex;
-        width: 100%;
-        align-items: center;
-      }
-      .prefix {
+      ha-icon {
         margin: 8px;
       }
     `;

src/components/data-table/ha-data-table.ts

@@ -727,6 +727,7 @@ export class HaDataTable extends LitElement {
       }
       .table-header {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+        padding: 0 16px;
       }
       search-input {
         position: relative;

src/dialogs/config-flow/step-flow-loading.ts

@@ -32,6 +32,9 @@ class StepFlowLoading extends LitElement {
         padding: 50px 100px;
         text-align: center;
       }
+      paper-spinner-lite {
+        margin-top: 16px;
+      }
     `;
   }
 }

src/dialogs/config-flow/step-flow-pick-handler.ts

@@ -8,7 +8,7 @@ import {
   TemplateResult,
 } from "lit-element";
 import "@polymer/paper-spinner/paper-spinner-lite";
-import "@polymer/paper-item/paper-item";
+import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import { HomeAssistant } from "../../types";
 import { fireEvent } from "../../common/dom/fire_event";
@@ -77,12 +77,25 @@ class StepFlowPickHandler extends LitElement {
         ${handlers.map(
           (handler: HandlerObj) =>
             html`
-              <paper-item @click=${this._handlerPicked} .handler=${handler}>
+              <paper-icon-item
+                @click=${this._handlerPicked}
+                .handler=${handler}
+              >
+                <img
+                  slot="item-icon"
+                  loading="lazy"
+                  src="https://brands.home-assistant.io/_/${handler.slug}/icon.png"
+                  srcset="
+                    https://brands.home-assistant.io/_/${handler.slug}/icon@2x.png 2x
+                  "
+                  referrerpolicy="no-referrer"
+                />
+
                 <paper-item-body>
                   ${handler.name}
                 </paper-item-body>
                 <ha-icon-next></ha-icon-next>
-              </paper-item>
+              </paper-icon-item>
             `
         )}
       </div>
@@ -144,6 +157,17 @@ class StepFlowPickHandler extends LitElement {
     return [
       configFlowContentStyles,
       css`
+        img {
+          max-width: 40px;
+          max-height: 40px;
+        }
+        search-input {
+          display: block;
+          margin: -12px 16px 0;
+        }
+        ha-icon-next {
+          margin-right: 8px;
+        }
         div {
           overflow: auto;
           max-height: 600px;
@@ -156,8 +180,9 @@ class StepFlowPickHandler extends LitElement {
             max-height: calc(100vh - 300px);
           }
         }
-        paper-item {
+        paper-icon-item {
           cursor: pointer;
+          margin-bottom: 4px;
         }
         p {
           text-align: center;

src/layouts/hass-tabs-subpage-data-table.ts

@@ -160,9 +160,11 @@ export class HaTabsSubpageDataTable extends LitElement {
       }
       .table-header {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
+        padding: 0 16px;
       }
       .search-toolbar {
         color: var(--secondary-text-color);
+        padding: 0 16px;
       }
       search-input {
         position: relative;

src/panels/config/entities/ha-config-entities.ts

@@ -624,6 +624,7 @@ export class HaConfigEntities extends SubscribeMixin(LitElement) {
         border-bottom: 1px solid rgba(var(--rgb-primary-text-color), 0.12);
       }
       search-input {
+        margin-left: 16px;
         flex-grow: 1;
         position: relative;
         top: 2px;

src/panels/config/lovelace/resources/ha-config-lovelace-resources.ts

@@ -14,7 +14,6 @@ import {
   css,
 } from "lit-element";
 import memoize from "memoize-one";
-import "../../../../common/search/search-input";
 import {
   DataTableColumnContainer,
   RowClickedEvent,