diff --git a/gallery/src/pages/components/ha-expansion-panel.ts b/gallery/src/pages/components/ha-expansion-panel.ts
index 0fbbc69694..56eb284aa2 100644
--- a/gallery/src/pages/components/ha-expansion-panel.ts
+++ b/gallery/src/pages/components/ha-expansion-panel.ts
@@ -1,4 +1,4 @@
-import { mdiPacMan } from "@mdi/js";
+import { mdiLightbulbOn, mdiPacMan } from "@mdi/js";
 import type { TemplateResult } from "lit";
 import { css, html, LitElement } from "lit";
 import { customElement } from "lit/decorators";
@@ -125,6 +125,23 @@ const SAMPLES: {
       `;
     },
   },
+  {
+    template(slot, leftChevron) {
+      return html`
+        <ha-expansion-panel
+          slot=${slot}
+          .leftChevron=${leftChevron}
+          header="Attr Header with actions"
+        >
+          <ha-svg-icon
+            slot="leading-icon"
+            .path=${mdiLightbulbOn}
+          ></ha-svg-icon>
+          ${SHORT_TEXT}
+        </ha-expansion-panel>
+      `;
+    },
+  },
 ];
 
 @customElement("demo-components-ha-expansion-panel")
diff --git a/src/components/ha-expansion-panel.ts b/src/components/ha-expansion-panel.ts
index ae300508cf..6604123d48 100644
--- a/src/components/ha-expansion-panel.ts
+++ b/src/components/ha-expansion-panel.ts
@@ -1,6 +1,6 @@
 import { mdiChevronDown } from "@mdi/js";
 import type { PropertyValues, TemplateResult } from "lit";
-import { css, html, LitElement } from "lit";
+import { css, html, LitElement, nothing } from "lit";
 import { customElement, property, query, state } from "lit/decorators";
 import { classMap } from "lit/directives/class-map";
 import { fireEvent } from "../common/dom/fire_event";
@@ -13,11 +13,11 @@ export class HaExpansionPanel extends LitElement {
 
   @property({ type: Boolean, reflect: true }) outlined = false;
 
-  @property({ attribute: false, type: Boolean, reflect: true }) leftChevron =
-    false;
+  @property({ attribute: "left-chevron", type: Boolean, reflect: true })
+  public leftChevron = false;
 
-  @property({ attribute: false, type: Boolean, reflect: true }) noCollapse =
-    false;
+  @property({ attribute: "no-collapse", type: Boolean, reflect: true })
+  public noCollapse = false;
 
   @property() header?: string;
 
@@ -28,6 +28,14 @@ export class HaExpansionPanel extends LitElement {
   @query(".container") private _container!: HTMLDivElement;
 
   protected render(): TemplateResult {
+    const chevronIcon = this.noCollapse
+      ? nothing
+      : html`
+          <ha-svg-icon
+            .path=${mdiChevronDown}
+            class="summary-icon ${classMap({ expanded: this.expanded })}"
+          ></ha-svg-icon>
+        `;
     return html`
       <div class="top ${classMap({ expanded: this.expanded })}">
         <div
@@ -42,28 +50,15 @@ export class HaExpansionPanel extends LitElement {
           aria-expanded=${this.expanded}
           aria-controls="sect1"
         >
-          ${this.leftChevron && !this.noCollapse
-            ? html`
-                <ha-svg-icon
-                  .path=${mdiChevronDown}
-                  class="summary-icon ${classMap({ expanded: this.expanded })}"
-                ></ha-svg-icon>
-              `
-            : ""}
+          ${this.leftChevron ? chevronIcon : nothing}
+          <slot name="leading-icon"></slot>
           <slot name="header">
             <div class="header">
               ${this.header}
               <slot class="secondary" name="secondary">${this.secondary}</slot>
             </div>
           </slot>
-          ${!this.leftChevron && !this.noCollapse
-            ? html`
-                <ha-svg-icon
-                  .path=${mdiChevronDown}
-                  class="summary-icon ${classMap({ expanded: this.expanded })}"
-                ></ha-svg-icon>
-              `
-            : ""}
+          ${!this.leftChevron ? chevronIcon : nothing}
           <slot name="icons"></slot>
         </div>
       </div>
@@ -177,7 +172,8 @@ export class HaExpansionPanel extends LitElement {
       margin-inline-end: initial;
     }
 
-    :host([leftchevron]) .summary-icon {
+    :host([left-chevron]) .summary-icon,
+    ::slotted([slot="leading-icon"]) {
       margin-left: 0;
       margin-right: 8px;
       margin-inline-start: 0;
diff --git a/src/components/ha-filter-blueprints.ts b/src/components/ha-filter-blueprints.ts
index 53c20e079f..18839b7cb6 100644
--- a/src/components/ha-filter-blueprints.ts
+++ b/src/components/ha-filter-blueprints.ts
@@ -45,7 +45,7 @@ export class HaFilterBlueprints extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-filter-categories.ts b/src/components/ha-filter-categories.ts
index c5da1e383e..678e784499 100644
--- a/src/components/ha-filter-categories.ts
+++ b/src/components/ha-filter-categories.ts
@@ -65,7 +65,7 @@ export class HaFilterCategories extends SubscribeMixin(LitElement) {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-filter-devices.ts b/src/components/ha-filter-devices.ts
index d8f310c864..9c3498a744 100644
--- a/src/components/ha-filter-devices.ts
+++ b/src/components/ha-filter-devices.ts
@@ -46,7 +46,7 @@ export class HaFilterDevices extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-filter-domains.ts b/src/components/ha-filter-domains.ts
index 9afced8bae..70b992c8a1 100644
--- a/src/components/ha-filter-domains.ts
+++ b/src/components/ha-filter-domains.ts
@@ -33,7 +33,7 @@ export class HaFilterDomains extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-filter-entities.ts b/src/components/ha-filter-entities.ts
index 271428e36b..d451f36c9d 100644
--- a/src/components/ha-filter-entities.ts
+++ b/src/components/ha-filter-entities.ts
@@ -48,7 +48,7 @@ export class HaFilterEntities extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-filter-floor-areas.ts b/src/components/ha-filter-floor-areas.ts
index b2a7f80a5a..5f0e3ee313 100644
--- a/src/components/ha-filter-floor-areas.ts
+++ b/src/components/ha-filter-floor-areas.ts
@@ -54,7 +54,7 @@ export class HaFilterFloorAreas extends LitElement {
 
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-filter-integrations.ts b/src/components/ha-filter-integrations.ts
index 84c031421c..46064d68a3 100644
--- a/src/components/ha-filter-integrations.ts
+++ b/src/components/ha-filter-integrations.ts
@@ -35,7 +35,7 @@ export class HaFilterIntegrations extends LitElement {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-filter-labels.ts b/src/components/ha-filter-labels.ts
index a199b308e5..ee9fbd8906 100644
--- a/src/components/ha-filter-labels.ts
+++ b/src/components/ha-filter-labels.ts
@@ -71,7 +71,7 @@ export class HaFilterLabels extends SubscribeMixin(LitElement) {
   protected render() {
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-filter-states.ts b/src/components/ha-filter-states.ts
index 8667e17df4..b39acfb970 100644
--- a/src/components/ha-filter-states.ts
+++ b/src/components/ha-filter-states.ts
@@ -41,7 +41,7 @@ export class HaFilterStates extends LitElement {
     const hasIcon = this.states.find((item) => item.icon);
     return html`
       <ha-expansion-panel
-        leftChevron
+        left-chevron
         .expanded=${this.expanded}
         @expanded-will-change=${this._expandedWillChange}
         @expanded-changed=${this._expandedChanged}
diff --git a/src/components/ha-form/ha-form-expandable.ts b/src/components/ha-form/ha-form-expandable.ts
index ed7e1930df..e44d136012 100644
--- a/src/components/ha-form/ha-form-expandable.ts
+++ b/src/components/ha-form/ha-form-expandable.ts
@@ -67,18 +67,23 @@ export class HaFormExpendable extends LitElement implements HaFormElement {
   protected render() {
     return html`
       <ha-expansion-panel outlined .expanded=${Boolean(this.schema.expanded)}>
+        ${this.schema.icon
+          ? html`
+              <ha-icon slot="leading-icon" .icon=${this.schema.icon}></ha-icon>
+            `
+          : this.schema.iconPath
+            ? html`
+                <ha-svg-icon
+                  slot="leading-icon"
+                  .path=${this.schema.iconPath}
+                ></ha-svg-icon>
+              `
+            : nothing}
         <div
           slot="header"
           role="heading"
           aria-level=${this.schema.headingLevel?.toString() ?? "3"}
         >
-          ${this.schema.icon
-            ? html` <ha-icon .icon=${this.schema.icon}></ha-icon> `
-            : this.schema.iconPath
-              ? html`
-                  <ha-svg-icon .path=${this.schema.iconPath}></ha-svg-icon>
-                `
-              : nothing}
           ${this.schema.title || this.computeLabel?.(this.schema)}
         </div>
         <div class="content">
diff --git a/src/components/ha-service-control.ts b/src/components/ha-service-control.ts
index 70ff1c5f97..a6f9d0126d 100644
--- a/src/components/ha-service-control.ts
+++ b/src/components/ha-service-control.ts
@@ -523,7 +523,7 @@ export class HaServiceControl extends LitElement {
           return fields.length &&
             this._hasFilteredFields(fields, targetEntities)
             ? html`<ha-expansion-panel
-                leftChevron
+                left-chevron
                 .expanded=${!dataField.collapsed}
                 .header=${this.hass.localize(
                   `component.${domain}.services.${serviceName}.sections.${dataField.key}.name`
diff --git a/src/panels/config/automation/action/ha-automation-action-row.ts b/src/panels/config/automation/action/ha-automation-action-row.ts
index dd0b868a13..009d071463 100644
--- a/src/panels/config/automation/action/ha-automation-action-row.ts
+++ b/src/panels/config/automation/action/ha-automation-action-row.ts
@@ -203,20 +203,24 @@ export default class HaAutomationActionRow extends LitElement {
               </div>
             `
           : nothing}
-        <ha-expansion-panel leftChevron>
-          <h3 slot="header">
-            ${type === "service" &&
-            "action" in this.action &&
-            this.action.action
-              ? html`<ha-service-icon
+        <ha-expansion-panel left-chevron>
+          ${type === "service" && "action" in this.action && this.action.action
+            ? html`
+                <ha-service-icon
+                  slot="leading-icon"
                   class="action-icon"
                   .hass=${this.hass}
                   .service=${this.action.action}
-                ></ha-service-icon>`
-              : html`<ha-svg-icon
+                ></ha-service-icon>
+              `
+            : html`
+                <ha-svg-icon
+                  slot="leading-icon"
                   class="action-icon"
                   .path=${ACTION_ICONS[type!]}
-                ></ha-svg-icon>`}
+                ></ha-svg-icon>
+              `}
+          <h3 slot="header">
             ${capitalizeFirstLetter(
               describeAction(
                 this.hass,
@@ -640,9 +644,6 @@ export default class HaAutomationActionRow extends LitElement {
             display: inline-block;
             color: var(--secondary-text-color);
             opacity: 0.9;
-            margin-right: 8px;
-            margin-inline-end: 8px;
-            margin-inline-start: initial;
           }
         }
         .card-content {
diff --git a/src/panels/config/automation/condition/ha-automation-condition-row.ts b/src/panels/config/automation/condition/ha-automation-condition-row.ts
index 80a32ec849..ea8c6240d7 100644
--- a/src/panels/config/automation/condition/ha-automation-condition-row.ts
+++ b/src/panels/config/automation/condition/ha-automation-condition-row.ts
@@ -128,12 +128,13 @@ export default class HaAutomationConditionRow extends LitElement {
             `
           : ""}
 
-        <ha-expansion-panel leftChevron>
+        <ha-expansion-panel left-chevron>
+          <ha-svg-icon
+            slot="leading-icon"
+            class="condition-icon"
+            .path=${CONDITION_ICONS[this.condition.condition]}
+          ></ha-svg-icon>
           <h3 slot="header">
-            <ha-svg-icon
-              class="condition-icon"
-              .path=${CONDITION_ICONS[this.condition.condition]}
-            ></ha-svg-icon>
             ${capitalizeFirstLetter(
               describeCondition(this.condition, this.hass, this._entityReg)
             )}
@@ -526,9 +527,6 @@ export default class HaAutomationConditionRow extends LitElement {
             display: inline-block;
             color: var(--secondary-text-color);
             opacity: 0.9;
-            margin-right: 8px;
-            margin-inline-end: 8px;
-            margin-inline-start: initial;
           }
         }
         .card-content {
diff --git a/src/panels/config/automation/option/ha-automation-option-row.ts b/src/panels/config/automation/option/ha-automation-option-row.ts
index 862adbd9d3..a6e4c80475 100644
--- a/src/panels/config/automation/option/ha-automation-option-row.ts
+++ b/src/panels/config/automation/option/ha-automation-option-row.ts
@@ -92,7 +92,7 @@ export default class HaAutomationOptionRow extends LitElement {
     return html`
       <ha-card outlined>
         <ha-expansion-panel
-          leftChevron
+          left-chevron
           @expanded-changed=${this._expandedChanged}
           id="option"
         >
diff --git a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
index aa090886c7..c2cdf73b4a 100644
--- a/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
+++ b/src/panels/config/automation/trigger/ha-automation-trigger-row.ts
@@ -159,12 +159,13 @@ export default class HaAutomationTriggerRow extends LitElement {
             `
           : nothing}
 
-        <ha-expansion-panel leftChevron>
+        <ha-expansion-panel left-chevron>
+          <ha-svg-icon
+            slot="leading-icon"
+            class="trigger-icon"
+            .path=${TRIGGER_ICONS[type]}
+          ></ha-svg-icon>
           <h3 slot="header">
-            <ha-svg-icon
-              class="trigger-icon"
-              .path=${TRIGGER_ICONS[type]}
-            ></ha-svg-icon>
             ${describeTrigger(this.trigger, this.hass, this._entityReg)}
           </h3>
 
@@ -672,9 +673,6 @@ export default class HaAutomationTriggerRow extends LitElement {
             display: inline-block;
             color: var(--secondary-text-color);
             opacity: 0.9;
-            margin-right: 8px;
-            margin-inline-end: 8px;
-            margin-inline-start: initial;
           }
         }
         .card-content {
diff --git a/src/panels/config/blueprint/blueprint-generic-editor.ts b/src/panels/config/blueprint/blueprint-generic-editor.ts
index a08e6e7869..840f7f1946 100644
--- a/src/panels/config/blueprint/blueprint-generic-editor.ts
+++ b/src/panels/config/blueprint/blueprint-generic-editor.ts
@@ -130,13 +130,16 @@ export abstract class HaBlueprintGenericEditor extends LitElement {
       .expanded=${expanded}
       .noCollapse=${anyRequired}
     >
-      <div slot="header" role="heading" aria-level="3" class="section-header">
-        ${section?.icon
-          ? html`<ha-icon
+      ${section?.icon
+        ? html`
+            <ha-icon
+              slot="leading-icon"
               class="section-header"
               .icon=${section.icon}
-            ></ha-icon>`
-          : nothing}
+            ></ha-icon>
+          `
+        : nothing}
+      <div slot="header" role="heading" aria-level="3" class="section-header">
         <ha-markdown .content=${title}></ha-markdown>
       </div>
       <div class="content">
diff --git a/src/panels/config/script/ha-script-field-row.ts b/src/panels/config/script/ha-script-field-row.ts
index 9363dc1784..ec6098602a 100644
--- a/src/panels/config/script/ha-script-field-row.ts
+++ b/src/panels/config/script/ha-script-field-row.ts
@@ -82,7 +82,7 @@ export default class HaScriptFieldRow extends LitElement {
 
     return html`
       <ha-card outlined>
-        <ha-expansion-panel leftChevron>
+        <ha-expansion-panel left-chevron>
           <h3 slot="header">${this.key}</h3>
 
           <slot name="icons" slot="icons"></slot>
diff --git a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts
index 4503522504..cfa2a63a08 100644
--- a/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts
+++ b/src/panels/lovelace/editor/conditions/ha-card-condition-editor.ts
@@ -97,12 +97,13 @@ export class HaCardConditionEditor extends LitElement {
 
     return html`
       <div class="container">
-        <ha-expansion-panel leftChevron>
+        <ha-expansion-panel left-chevron>
+          <ha-svg-icon
+            slot="leading-icon"
+            class="condition-icon"
+            .path=${ICON_CONDITION[condition.condition]}
+          ></ha-svg-icon>
           <h3 slot="header">
-            <ha-svg-icon
-              class="condition-icon"
-              .path=${ICON_CONDITION[condition.condition]}
-            ></ha-svg-icon>
             ${this.hass.localize(
               `ui.panel.lovelace.editor.condition-editor.condition.${condition.condition}.label`
             ) || condition.condition}
diff --git a/src/panels/lovelace/editor/config-elements/config-elements-style.ts b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
index 5434de8d2e..8810a230f1 100644
--- a/src/panels/lovelace/editor/config-elements/config-elements-style.ts
+++ b/src/panels/lovelace/editor/config-elements/config-elements-style.ts
@@ -43,7 +43,7 @@ export const configElementStyle = css`
   ha-expansion-panel .content {
     padding: 12px;
   }
-  ha-expansion-panel > * {
+  ha-expansion-panel > *[slot="header"] {
     margin: 0;
     font-size: inherit;
     font-weight: inherit;
diff --git a/src/panels/lovelace/editor/config-elements/hui-heading-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-heading-card-editor.ts
index e2b1c985bc..9a0486ebbf 100644
--- a/src/panels/lovelace/editor/config-elements/hui-heading-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-heading-card-editor.ts
@@ -137,8 +137,8 @@ export class HuiHeadingCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <ha-expansion-panel outlined>
+        <ha-svg-icon slot="leading-icon" .path=${mdiListBox}></ha-svg-icon>
         <h3 slot="header">
-          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.heading.entities"
           )}
diff --git a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
index 16ff0caff2..ebc035dfe3 100644
--- a/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-humidifier-card-editor.ts
@@ -102,8 +102,8 @@ export class HuiHumidifierCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <ha-expansion-panel outlined>
+        <ha-svg-icon slot="leading-icon" .path=${mdiListBox}></ha-svg-icon>
         <h3 slot="header">
-          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.generic.features"
           )}
diff --git a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
index 93977539ef..b274c80bb9 100644
--- a/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-thermostat-card-editor.ts
@@ -101,8 +101,8 @@ export class HuiThermostatCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <ha-expansion-panel outlined>
+        <ha-svg-icon slot="leading-icon" .path=${mdiListBox}></ha-svg-icon>
         <h3 slot="header">
-          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.generic.features"
           )}
diff --git a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
index a5e3c9e528..ba834a00d7 100644
--- a/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
+++ b/src/panels/lovelace/editor/config-elements/hui-tile-card-editor.ts
@@ -310,8 +310,8 @@ export class HuiTileCardEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <ha-expansion-panel outlined>
+        <ha-svg-icon slot="leading-icon" .path=${mdiListBox}></ha-svg-icon>
         <h3 slot="header">
-          <ha-svg-icon .path=${mdiListBox}></ha-svg-icon>
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.generic.features"
           )}
diff --git a/src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts b/src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts
index 70688e1d46..061a0a0646 100644
--- a/src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts
+++ b/src/panels/lovelace/editor/heading-badge-editor/hui-entity-heading-badge-editor.ts
@@ -191,8 +191,8 @@ export class HuiHeadingEntityEditor
         @value-changed=${this._valueChanged}
       ></ha-form>
       <ha-expansion-panel outlined>
+        <ha-svg-icon slot="leading-icon" .path=${mdiEye}></ha-svg-icon>
         <h3 slot="header">
-          <ha-svg-icon .path=${mdiEye}></ha-svg-icon>
           ${this.hass!.localize(
             "ui.panel.lovelace.editor.card.heading.entity_config.visibility"
           )}