Move icon slot and adjust styles

gallery/src/demos/demo-ha-alert.ts

@@ -1,8 +1,9 @@
-import "../../../src/components/ha-logo-svg";
-import { html, css, LitElement, TemplateResult } from "lit";
+import "@material/mwc-button/mwc-button";
+import { css, html, LitElement, TemplateResult } from "lit";
 import { customElement } from "lit/decorators";
 import "../../../src/components/ha-alert";
 import "../../../src/components/ha-card";
+import "../../../src/components/ha-logo-svg";
 
 const alerts: {
   title?: string;
@@ -88,7 +89,17 @@ const alerts: {
     title: "Slotted icon",
     description: "Alert with slotted icon",
     type: "warning",
-    iconSlot: html`<ha-logo-svg slot="icon"></ha-logo-svg>`,
+    iconSlot: html`<span slot="icon" class="image">
+      <ha-logo-svg></ha-logo-svg>
+    </span>`,
+  },
+  {
+    title: "Slotted image",
+    description: "Alert with slotted image",
+    type: "warning",
+    iconSlot: html`<span slot="icon" class="image"
+      ><img src="https://www.home-assistant.io/images/home-assistant-logo.svg"
+    /></span>`,
   },
   {
     title: "Slotted action",
@@ -157,14 +168,14 @@ export class DemoHaAlert extends LitElement {
         align-items: center;
         justify-content: space-between;
       }
-      span {
-        margin-right: 16px;
+      .image {
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
       }
-      ha-logo-svg {
-        width: 28px;
-        height: 28px;
-        padding-right: 8px;
-        place-self: center;
+      img {
+        max-height: 24px;
+        width: 24px;
       }
       mwc-button {
         --mdc-theme-primary: var(--primary-text-color);

gallery/src/demos/demo-ha-svg-icon.ts

@@ -0,0 +1,59 @@
+import { css, html, LitElement, TemplateResult } from "lit";
+import { customElement } from "lit/decorators";
+import { getColorByIndex } from "../../../src/common/color/colors";
+import { FIXED_DOMAIN_ICONS } from "../../../src/common/const";
+import "../../../src/components/ha-card";
+import "../../../src/components/ha-svg-icon";
+
+@customElement("demo-ha-svg-icon")
+export class DemoHaSvgIcon extends LitElement {
+  protected render(): TemplateResult {
+    return html`
+      <ha-card header="ha-svg-icon demo">
+        <div class="card-content">
+          ${Object.values(FIXED_DOMAIN_ICONS).map(
+            (icon) => html`
+              <div class="icon">
+                <ha-svg-icon .path=${icon}></ha-svg-icon>
+                <ha-svg-icon
+                  .path=${icon}
+                  .backgroundColor=${getColorByIndex(icon.length)}
+                ></ha-svg-icon>
+                <ha-svg-icon
+                  class="background"
+                  .path=${icon}
+                  .backgroundColor=${getColorByIndex(icon.length)}
+                ></ha-svg-icon>
+              </div>
+            `
+          )}
+        </div>
+      </ha-card>
+    `;
+  }
+
+  static get styles() {
+    return css`
+      ha-card {
+        max-width: 600px;
+        margin: 24px auto;
+      }
+      ha-svg-icon {
+        margin: 4px;
+      }
+      .background {
+        color: var(--card-background-color);
+      }
+      .icon {
+        display: flex;
+        align-items: center;
+      }
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    "demo-ha-svg-icon": DemoHaSvgIcon;
+  }
+}

src/components/ha-alert.ts

@@ -51,32 +51,30 @@ class HaAlert extends LitElement {
           [this.alertType]: true,
         })}"
       >
-        <slot name="icon">
-          <div class="icon ${this.title ? "" : "no-title"}">
+        <div class="icon ${this.title ? "" : "no-title"}">
+          <slot name="icon">
             <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
-          </div>
-        </slot>
+          </slot>
+        </div>
         <div class="content">
           <div class="main-content">
             ${this.title ? html`<div class="title">${this.title}</div>` : ""}
             <slot></slot>
           </div>
-          <div class="action">
-            <slot name="action">
-              ${this.actionText
-                ? html`<mwc-button
-                    @click=${this._action_clicked}
-                    .label=${this.actionText}
-                  ></mwc-button>`
-                : this.dismissable
-                ? html`<ha-icon-button
-                    @click=${this._dismiss_clicked}
-                    label="Dismiss alert"
-                    .path=${mdiClose}
-                  ></ha-icon-button>`
-                : ""}
-            </slot>
-          </div>
+          <slot name="action">
+            ${this.actionText
+              ? html`<mwc-button
+                  @click=${this._action_clicked}
+                  .label=${this.actionText}
+                ></mwc-button>`
+              : this.dismissable
+              ? html`<ha-icon-button
+                  @click=${this._dismiss_clicked}
+                  label="Dismiss alert"
+                  .path=${mdiClose}
+                ></ha-icon-button>`
+              : ""}
+          </slot>
         </div>
       </div>
     `;
@@ -100,7 +98,7 @@ class HaAlert extends LitElement {
     .issue-type.rtl {
       flex-direction: row-reverse;
     }
-    .issue-type::before {
+    .issue-type::after {
       position: absolute;
       top: 0;
       right: 0;
@@ -111,18 +109,12 @@ class HaAlert extends LitElement {
       content: "";
       border-radius: 4px;
     }
-    slot > .icon {
-      margin-right: 8px;
-      width: 24px;
+    .icon {
+      z-index: 1;
     }
     .icon.no-title {
       align-self: center;
     }
-    .issue-type.rtl > slot > .icon {
-      margin-right: 0px;
-      margin-left: 8px;
-      width: 24px;
-    }
     .issue-type.rtl > .content {
       flex-direction: row-reverse;
       text-align: right;
@@ -135,6 +127,12 @@ class HaAlert extends LitElement {
     }
     .main-content {
       overflow-wrap: anywhere;
+      margin-left: 8px;
+      margin-right: 0;
+    }
+    .issue-type.rtl > .main-content {
+      margin-left: 0;
+      margin-right: 8px;
     }
     .title {
       margin-top: 2px;
@@ -146,31 +144,31 @@ class HaAlert extends LitElement {
     ha-icon-button {
       --mdc-icon-button-size: 36px;
     }
-    .issue-type.info > slot > .icon {
+    .issue-type.info > .icon {
       color: var(--info-color);
     }
-    .issue-type.info::before {
+    .issue-type.info::after {
       background-color: var(--info-color);
     }
 
-    .issue-type.warning > slot > .icon {
+    .issue-type.warning > .icon {
       color: var(--warning-color);
     }
-    .issue-type.warning::before {
+    .issue-type.warning::after {
       background-color: var(--warning-color);
     }
 
-    .issue-type.error > slot > .icon {
+    .issue-type.error > .icon {
       color: var(--error-color);
     }
-    .issue-type.error::before {
+    .issue-type.error::after {
       background-color: var(--error-color);
     }
 
-    .issue-type.success > slot > .icon {
+    .issue-type.success > .icon {
       color: var(--success-color);
     }
-    .issue-type.success::before {
+    .issue-type.success::after {
       background-color: var(--success-color);
     }
   `;

src/components/ha-svg-icon.ts

@@ -7,9 +7,15 @@ export class HaSvgIcon extends LitElement {
 
   @property() public viewBox?: string;
 
+  @property({ attribute: "background-color" }) public backgroundColor?: string;
+
   protected render(): SVGTemplateResult {
     return svg`
     <svg
+      class="${this.backgroundColor ? "background" : ""}"
+      style="background-color: ${
+        this.backgroundColor ? this.backgroundColor : "undefined"
+      };"
       viewBox=${this.viewBox || "0 0 24 24"}
       preserveAspectRatio="xMidYMid meet"
       focusable="false">
@@ -28,12 +34,14 @@ export class HaSvgIcon extends LitElement {
         position: relative;
         vertical-align: middle;
         fill: currentcolor;
-        width: var(--mdc-icon-size, 24px);
-        height: var(--mdc-icon-size, 24px);
+      }
+      .background {
+        padding: 8px;
+        border-radius: 50%;
       }
       svg {
-        width: 100%;
-        height: 100%;
+        width: var(--mdc-icon-size, 24px);
+        height: var(--mdc-icon-size, 24px);
         pointer-events: none;
         display: block;
       }

src/panels/config/dashboard/ha-config-updates.ts

@@ -1,5 +1,5 @@
 import "@material/mwc-button/mwc-button";
-import { mdiPackageVariant } from "@mdi/js";
+import { mdiPackageUp } from "@mdi/js";
 import "@polymer/paper-item/paper-icon-item";
 import "@polymer/paper-item/paper-item-body";
 import {
@@ -63,7 +63,7 @@ class HaConfigUpdates extends LitElement {
               ${update.update_type === "addon"
                 ? update.icon
                   ? html`<img src="/api/hassio${update.icon}" />`
-                  : html`<ha-svg-icon .path=${mdiPackageVariant}></ha-svg-icon>`
+                  : html`<ha-svg-icon .path=${mdiPackageUp}></ha-svg-icon>`
                 : html`<ha-logo-svg></ha-logo-svg>`}
             </span>
             ${this.hass.localize("ui.panel.config.updates.version_available", {
@@ -98,15 +98,18 @@ class HaConfigUpdates extends LitElement {
         color: var(--primary-text-color);
       }
       .icon {
-        place-self: center;
+        display: inline-flex;
+        height: 100%;
+        align-items: center;
       }
       img,
       ha-svg-icon,
       ha-logo-svg {
-        width: var(--mdc-icon-size, 32px);
-        height: var(--mdc-icon-size, 32px);
-        padding-right: 12px;
-        display: block;
+        --mdc-icon-size: 32px;
+        max-height: 32px;
+        width: 32px;
+      }
+      ha-logo-svg {
         color: var(--secondary-text-color);
       }
     `;