[CL-215] Fix broken icon stories and clarify usage (#8484)

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

@@ -1,31 +1,24 @@
 import { Meta, StoryObj } from "@storybook/angular";
 
 import { BitIconComponent } from "./icon.component";
+import * as GenericIcons from "./icons";
 
 export default {
   title: "Component Library/Icon",
   component: BitIconComponent,
-  args: {
-    icon: "reportExposedPasswords",
-  },
 } as Meta;
 
 type Story = StoryObj<BitIconComponent>;
 
-export const ReportExposedPasswords: Story = {
+export const Default: Story = {
-  render: (args) => ({
-    props: args,
-    template: `
-    <div class="tw-bg-primary-500 tw-p-5">
-      <bit-icon [icon]="icon" class="tw-text-primary-300"></bit-icon>
-    </div>
-    `,
-  }),
-};
-
-export const UnknownIcon: Story = {
-  ...ReportExposedPasswords,
   args: {
-    icon: "unknown" as any,
+    icon: GenericIcons.NoAccess,
+  },
+  argTypes: {
+    icon: {
+      options: Object.keys(GenericIcons),
+      mapping: GenericIcons,
+      control: { type: "select" },
+    },
   },
 };