From 8e071d3ead488c1371fd778b39dd8d8fbf9dcd23 Mon Sep 17 00:00:00 2001
From: Bryan Cunningham <bryan.cunningham@me.com>
Date: Thu, 15 Jan 2026 10:15:17 -0500
Subject: [PATCH] use template outlet in button

---
 .../src/button/button.component.html          | 30 +++++++++++++------
 .../components/src/button/button.component.ts |  4 +--
 2 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/libs/components/src/button/button.component.html b/libs/components/src/button/button.component.html
index 93519e7fb64..c7084a8b6ec 100644
--- a/libs/components/src/button/button.component.html
+++ b/libs/components/src/button/button.component.html
@@ -2,17 +2,29 @@
 @let leadIcon = startIcon();
 @let tailIcon = endIcon();
 
+<ng-template #content>
+  <ng-content></ng-content>
+</ng-template>
+
 <span class="tw-relative">
   <span [class.tw-invisible]="showLoadingStyles">
-    <span [class]="leadIcon || tailIcon ? 'tw-flex tw-items-center tw-gap-2' : ''">
-      @if (leadIcon) {
-        <i class="{{ startIconClasses() }}"></i>
-      }
-      <ng-content></ng-content>
-      @if (tailIcon) {
-        <i class="{{ endIconClasses() }}"></i>
-      }
-    </span>
+    @if (leadIcon || tailIcon) {
+      <div class="tw-flex tw-items-center tw-gap-2">
+        @if (leadIcon) {
+          <i class="{{ startIconClasses() }}"></i>
+        }
+        <div>
+          <ng-container *ngTemplateOutlet="content"></ng-container>
+        </div>
+        @if (tailIcon) {
+          <i class="{{ endIconClasses() }}"></i>
+        }
+      </div>
+    } @else {
+      <div>
+        <ng-container *ngTemplateOutlet="content"></ng-container>
+      </div>
+    }
   </span>
   @if (showLoadingStyles) {
     <span class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center">
diff --git a/libs/components/src/button/button.component.ts b/libs/components/src/button/button.component.ts
index f51925740e0..1055d134e53 100644
--- a/libs/components/src/button/button.component.ts
+++ b/libs/components/src/button/button.component.ts
@@ -1,4 +1,4 @@
-import { NgClass } from "@angular/common";
+import { NgClass, NgTemplateOutlet } from "@angular/common";
 import {
   input,
   HostBinding,
@@ -72,7 +72,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
   selector: "button[bitButton], a[bitButton]",
   templateUrl: "button.component.html",
   providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
-  imports: [NgClass, SpinnerComponent],
+  imports: [NgClass, NgTemplateOutlet, SpinnerComponent],
   hostDirectives: [AriaDisableDirective],
 })
 export class ButtonComponent implements ButtonLikeAbstraction {