[CL] Document the start and end icon attributes (#19100)

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

@@ -1,4 +1,3 @@
-import { NgClass, NgTemplateOutlet } from "@angular/common";
 import {
   input,
   HostBinding,
@@ -72,7 +71,7 @@ const buttonStyles: Record<ButtonType, string[]> = {
   selector: "button[bitButton], a[bitButton]",
   templateUrl: "button.component.html",
   providers: [{ provide: ButtonLikeAbstraction, useExisting: ButtonComponent }],
-  imports: [NgClass, NgTemplateOutlet, SpinnerComponent],
+  imports: [SpinnerComponent],
   hostDirectives: [AriaDisableDirective],
 })
 export class ButtonComponent implements ButtonLikeAbstraction {
@@ -124,14 +123,31 @@ export class ButtonComponent implements ButtonLikeAbstraction {
     return this.showLoadingStyle() || (this.disabledAttr() && this.loading() === false);
   });
 
+  /**
+   * Style variant of the button.
+   */
   readonly buttonType = input<ButtonType>("secondary");
 
+  /**
+   * Bitwarden icon displayed **before** the button label.
+   * Spacing between the icon and label is handled automatically.
+   */
   readonly startIcon = input<BitwardenIcon | undefined>(undefined);
 
+  /**
+   * Bitwarden icon (`bwi-*`) displayed **after** the button label.
+   * Spacing between the label and icon is handled automatically.
+   */
   readonly endIcon = input<BitwardenIcon | undefined>(undefined);
 
+  /**
+   * Size variant of the button.
+   */
   readonly size = input<ButtonSize>("default");
 
+  /**
+   * When `true`, the button expands to fill the full width of its container.
+   */
   readonly block = input(false, { transform: booleanAttribute });
 
   readonly loading = model<boolean>(false);

libs/components/src/button/button.mdx

@@ -80,21 +80,20 @@ where the width is fixed and the text wraps to 2 lines if exceeding the button
 
 ## With Icon
 
-To ensure consistent icon spacing, the icon should have .5rem spacing on left or right(depending on
-placement).
+Use the `startIcon` and `endIcon` inputs to add a Bitwarden icon (`bwi-*`) before or after the
+button label. Do not use a `<bit-icon>` component inside the button as this may not have the correct
+styling and spacing.
 
-> NOTE: Use logical css properties to ensure LTR/RTL support.
-
-**If icon is placed before button label**
+### Icon before the label
 
 ```html
-<i class="bwi bwi-plus tw-me-2"></i>
+<button bitButton startIcon="bwi-plus">Add item</button>
 ```
 
-**If icon is placed after button label**
+### Icon after the label
 
 ```html
-<i class="bwi bwi-plus tw-ms-2"></i>
+<button bitButton endIcon="bwi-angle-right">Next</button>
 ```
 
 <Canvas of={stories.WithIcon} />