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);

src/components/ha-alert.ts

@@ -51,17 +51,16 @@ class HaAlert extends LitElement {
           [this.alertType]: true,
         })}"
       >
-        <slot name="icon">
         <div class="icon ${this.title ? "" : "no-title"}">
+          <slot name="icon">
             <ha-svg-icon .path=${ALERT_ICONS[this.alertType]}></ha-svg-icon>
-          </div>
           </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
@@ -78,7 +77,6 @@ class HaAlert extends LitElement {
           </slot>
         </div>
       </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/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);
       }
     `;