use template outlet in button

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">

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 {