[CL-1058] Eslint suggestions for no-bwi-class and no-icon-children (#19134)

Follow up to #19104 and #18584 to add eslint suggestions that can be applied in editors to speed up resolving the lints.

Also adds a fixedWidth input to bit-icon since having fixed width icons is fairly common and I would prefer that we don't keep bwi-fw

libs/components/src/icon/icon.component.ts

@@ -1,4 +1,10 @@
-import { ChangeDetectionStrategy, Component, computed, input } from "@angular/core";
+import {
+  booleanAttribute,
+  ChangeDetectionStrategy,
+  Component,
+  computed,
+  input,
+} from "@angular/core";
 
 import { BitwardenIcon } from "../shared/icon";
 
@@ -24,7 +30,12 @@ export class IconComponent {
    */
   readonly ariaLabel = input<string>();
 
-  protected readonly classList = computed(() => {
-    return ["bwi", this.name()].join(" ");
-  });
+  /**
+   * Whether the icon should use a fixed width
+   */
+  readonly fixedWidth = input(false, { transform: booleanAttribute });
+
+  protected readonly classList = computed(() =>
+    ["bwi", this.name(), this.fixedWidth() && "bwi-fw"].filter(Boolean),
+  );
 }

libs/components/src/icon/icon.mdx

@@ -15,7 +15,7 @@ The `bit-icon` component renders Bitwarden Web Icons (bwi) using icon font class
 ## Basic Usage
 
 ```html
-<bit-icon name="bwi-lock"></bit-icon>
+<bit-icon name="bwi-lock" />
 ```
 
 ## Icon Names
@@ -29,7 +29,7 @@ By default, icons are decorative and marked with `aria-hidden="true"`. To make a
 provide an `ariaLabel`:
 
 ```html
-<bit-icon name="bwi-lock" [ariaLabel]="'Secure lock'"></bit-icon>
+<bit-icon name="bwi-lock" [ariaLabel]="'Secure lock'" />
 ```
 
 ## Styling
@@ -38,7 +38,7 @@ The component renders as an inline element. Apply standard CSS classes or styles
 appearance:
 
 ```html
-<bit-icon name="bwi-lock" class="tw-text-primary-500 tw-text-2xl"></bit-icon>
+<bit-icon name="bwi-lock" class="tw-text-primary-500 tw-text-2xl" />
 ```
 
 ## Note on SVG Icons

libs/components/src/icon/icon.stories.ts

@@ -54,6 +54,47 @@ export const WithAriaLabel: Story = {
   },
 };
 
+export const FixedWidth: Story = {
+  args: {
+    name: "bwi-lock",
+    fixedWidth: true,
+  },
+};
+
+export const FixedWidthComparison: Story = {
+  render: () => ({
+    template: `
+      <div class="tw-flex tw-flex-col tw-gap-2">
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <bit-icon name="bwi-lock" fixedWidth />
+          <span>bwi-lock (fixed width)</span>
+        </div>
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <bit-icon name="bwi-eye" fixedWidth />
+          <span>bwi-eye (fixed width)</span>
+        </div>
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <bit-icon name="bwi-collection" fixedWidth />
+          <span>bwi-collection (fixed width)</span>
+        </div>
+        <hr class="tw-my-2" />
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <bit-icon name="bwi-lock" />
+          <span>bwi-lock (default)</span>
+        </div>
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <bit-icon name="bwi-eye" />
+          <span>bwi-eye (default)</span>
+        </div>
+        <div class="tw-flex tw-items-center tw-gap-2">
+          <bit-icon name="bwi-collection" />
+          <span>bwi-collection (default)</span>
+        </div>
+      </div>
+    `,
+  }),
+};
+
 export const CompareWithLegacy: Story = {
   render: () => ({
     template: `<bit-icon name="bwi-lock"></bit-icon> <i class="bwi bwi-lock"></i>`,