[CL-706] Display all svg icons in Storybook (#16111)

libs/components/src/icon/icon.mdx

@@ -77,7 +77,10 @@ import { IconModule } from "@bitwarden/components";
    - **Note:** Scaling is required for any SVG used as an
      [AnonLayout](?path=/docs/component-library-anon-layout--docs) `pageIcon`.
 
-7. **Import your SVG const** anywhere you want to use the SVG.
+7. **Replace any generic `clipPath` ids** (such as `id="a"`) with a unique id, and update the
+   referencing element to use the new id (such as `clip-path="url(#unique-id-here)"`).
+
+8. **Import your SVG const** anywhere you want to use the SVG.
    - **Angular Component Example:**
      - **TypeScript:**
 
@@ -113,5 +116,5 @@ import { IconModule } from "@bitwarden/components";
        <bit-icon [icon]="Icons.ExampleIcon" [ariaLabel]="Your custom label text here"></bit-icon>
        ```
 
-8. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
+9. **Ensure your SVG renders properly** according to Figma in both light and dark modes on a client
    which supports multiple style modes.

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from "@storybook/angular";
+import { Meta } from "@storybook/angular";
 
 import * as SvgIcons from "@bitwarden/assets/svg";
 
@@ -15,25 +15,36 @@ export default {
   },
 } as Meta;
 
-type Story = StoryObj<BitIconComponent>;
+const {
+  // Filtering out the few non-icons in the libs/assets/svg import
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  DynamicContentNotAllowedError: _DynamicContentNotAllowedError,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  isIcon,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  svgIcon,
+  ...Icons
+}: {
+  [key: string]: any;
+} = SvgIcons;
 
-// Filtering out the few non-icons in the libs/assets/svg import
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-const { DynamicContentNotAllowedError, isIcon, svgIcon, ...Icons } = SvgIcons;
-
-export const Default: Story = {
+export const Default = {
+  render: (args: { icons: [string, any][] }) => ({
+    props: args,
+    template: /*html*/ `
+    <div class="tw-bg-secondary-100 tw-p-2 tw-grid tw-grid-cols-[repeat(auto-fit,minmax(224px,1fr))] tw-gap-2">
+      @for (icon of icons; track icon[0]) {
+        <div class="tw-size-56 tw-border tw-border-secondary-300 tw-rounded-md">
+          <div class="tw-text-xs tw-text-center">{{icon[0]}}</div>
+          <div class="tw-size-52 tw-w-full tw-content-center">
+            <bit-icon [icon]="icon[1]" class="tw-flex tw-justify-center tw-max-h-full"></bit-icon>
+          </div>
+        </div>
+      }
+    </div>
+    `,
+  }),
   args: {
-    icon: Icons.NoAccess,
-  },
-  argTypes: {
-    icon: {
-      options: Object.keys(Icons),
-      mapping: Icons,
-      control: { type: "select" },
-    },
-    ariaLabel: {
-      control: "text",
-      description: "the text used by a screen reader to describe the icon",
-    },
+    icons: Object.entries(Icons),
   },
 };