update button api to accept icons

libs/components/src/button/button.component.html

@@ -1,8 +1,20 @@
+@let showLoadingStyles = showLoadingStyle();
+@let leadIcon = startIcon();
+@let tailIcon = endIcon();
+
 <span class="tw-relative">
-  <span [ngClass]="{ 'tw-invisible': showLoadingStyle() }">
-    <ng-content></ng-content>
+  <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>
   </span>
-  @if (showLoadingStyle()) {
+  @if (showLoadingStyles) {
     <span class="tw-absolute tw-inset-0 tw-flex tw-items-center tw-justify-center">
       <bit-spinner size="fill" noColor></bit-spinner>
     </span>

libs/components/src/button/button.component.ts

@@ -14,6 +14,7 @@ import { debounce, interval } from "rxjs";
 
 import { AriaDisableDirective } from "../a11y";
 import { ButtonLikeAbstraction, ButtonType, ButtonSize } from "../shared/button-like.abstraction";
+import { BitwardenIcon } from "../shared/icon";
 import { SpinnerComponent } from "../spinner";
 import { ariaDisableElement } from "../utils";
 
@@ -125,12 +126,23 @@ export class ButtonComponent implements ButtonLikeAbstraction {
 
   readonly buttonType = input<ButtonType>("secondary");
 
+  readonly startIcon = input<BitwardenIcon | undefined>(undefined);
+
+  readonly endIcon = input<BitwardenIcon | undefined>(undefined);
+
   readonly size = input<ButtonSize>("default");
 
   readonly block = input(false, { transform: booleanAttribute });
 
   readonly loading = model<boolean>(false);
 
+  readonly startIconClasses = computed(() => {
+    return ["bwi", this.startIcon()];
+  });
+
+  readonly endIconClasses = computed(() => {
+    return ["bwi", this.endIcon()];
+  });
   /**
    * Determine whether it is appropriate to display a loading spinner. We only want to show
    * a spinner if it's been more than 75 ms since the `loading` state began. This prevents

libs/components/src/button/button.stories.ts

@@ -152,15 +152,13 @@ export const WithIcon: Story = {
     template: /*html*/ `
       <span class="tw-flex tw-gap-8">
         <div>
-          <button type="button" bitButton [buttonType]="buttonType" [block]="block">
-            <i class="bwi bwi-plus tw-me-2"></i>
+          <button type="button" startIcon="bwi-plus" bitButton [buttonType]="buttonType" [block]="block">
             Button label
           </button>
         </div>
         <div>
-          <button type="button" bitButton [buttonType]="buttonType" [block]="block">
+          <button type="button" endIcon="bwi-plus" bitButton [buttonType]="buttonType" [block]="block">
             Button label
-            <i class="bwi bwi-plus tw-ms-2"></i>
           </button>
         </div>
       </span>