Fix color over slotted image in ha-alert (#10652)

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

@@ -87,7 +87,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",
@@ -155,14 +165,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

@@ -47,11 +47,11 @@ 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>` : ""}
@@ -87,7 +87,7 @@ class HaAlert extends LitElement {
     .issue-type.rtl {
       flex-direction: row-reverse;
     }
-    .issue-type::before {
+    .issue-type::after {
       position: absolute;
       top: 0;
       right: 0;
@@ -98,18 +98,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;
@@ -126,39 +120,47 @@ class HaAlert extends LitElement {
     }
     .main-content {
       overflow-wrap: anywhere;
+      margin-left: 8px;
+      margin-right: 0;
+    }
+    .issue-type.rtl > .content > .main-content {
+      margin-left: 0;
+      margin-right: 8px;
     }
     .title {
       margin-top: 2px;
       font-weight: bold;
     }
-    ha-icon-button {
+    .action mwc-button,
+    .action ha-icon-button {
+      --mdc-theme-primary: var(--primary-text-color);
       --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

@@ -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);
       }
     `;