feat: add icon component

apps/docs/data/design/material-you/components/icon.mdx

@@ -0,0 +1,31 @@
+---
+title: Icon
+---
+
+# Icon
+
+The `Icon` component is used to display an icon. It utilizes the [`Material Symbols`](https://fonts.google.com/icons) font to render the icon.
+
+<Demo src="/demos/material-you/icon" />
+
+## Usage
+
+```jsx
+import { BakaIcon } from "baka-ui";
+
+function MyComponent() {
+  return <BakaIcon>settings</BakaIcon>;
+}
+```
+
+## Variants
+
+The `Icon` component supports the following variants:
+
+- `primary` and `error` &mdash; for primary and error icons, respectively.
+- `small`, `medium`, and `large` &mdash; for sizing the icon.
+- `filled` &mdash; for filled icons.
+
+```jsx
+<BakaIcon variant={["primary", "large", "filled"]}>settings</BakaIcon>
+```

apps/docs/data/design/material-you/index.mdx

@@ -26,6 +26,7 @@ The package contains styles for the following `baka-ui` component primitives:
 - [`Chip`](/design/material-you/components/chip)
 - [`Dialog`](/design/material-you/components/dialog)
 - [`Divider`](/design/material-you/components/divider)
+- [`Icon`](/design/material-you/components/icon)
 - [`Layout`](/design/material-you/components/layout)
 - [`List`](/design/material-you/components/list)
 - [`Menu`](/design/material-you/components/menu)

apps/docs/src/app/demos/material-you/icon/page.tsx

@@ -0,0 +1,35 @@
+import { BakaIcon } from "baka-ui";
+
+export default function IconDemo() {
+  return (
+    <div
+      style={{
+        display: "grid",
+        gridTemplateColumns: "repeat(6, 1fr)",
+        gap: "16px",
+        alignItems: "center",
+      }}
+    >
+      <BakaIcon variant={["small"]}>settings</BakaIcon>
+      <BakaIcon variant={["filled", "small"]}>settings</BakaIcon>
+      <BakaIcon variant={["medium"]}>settings</BakaIcon>
+      <BakaIcon variant={["medium", "filled"]}>settings</BakaIcon>
+      <BakaIcon variant={["large"]}>settings</BakaIcon>
+      <BakaIcon variant={["filled", "large"]}>settings</BakaIcon>
+
+      <BakaIcon variant={["primary", "small"]}>settings</BakaIcon>
+      <BakaIcon variant={["primary", "filled", "small"]}>settings</BakaIcon>
+      <BakaIcon variant={["primary", "medium"]}>settings</BakaIcon>
+      <BakaIcon variant={["primary", "medium", "filled"]}>settings</BakaIcon>
+      <BakaIcon variant={["primary", "large"]}>settings</BakaIcon>
+      <BakaIcon variant={["primary", "filled", "large"]}>settings</BakaIcon>
+
+      <BakaIcon variant={["error", "small"]}>settings</BakaIcon>
+      <BakaIcon variant={["error", "filled", "small"]}>settings</BakaIcon>
+      <BakaIcon variant={["error", "medium"]}>settings</BakaIcon>
+      <BakaIcon variant={["error", "medium", "filled"]}>settings</BakaIcon>
+      <BakaIcon variant={["error", "large"]}>settings</BakaIcon>
+      <BakaIcon variant={["error", "filled", "large"]}>settings</BakaIcon>
+    </div>
+  );
+}

apps/docs/src/app/demos/material-you/icon/stories/icon.stories.tsx

@@ -0,0 +1,49 @@
+/// <reference types="baka-material-you" />
+
+import React from "react";
+import type { BakaDesign } from "baka-core";
+import type { Meta, StoryObj } from "@storybook/react";
+import IconStory, { IconStoryProps, defaultProps } from "./page";
+import icons from "./icons.json";
+
+const variantOptions: BakaDesign["IconVariant"][] = ["primary", "error"];
+
+const meta: Meta = {
+  title: "Material You/Icon",
+  component: (props: IconStoryProps) => <IconStory {...props} />,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    icon: {
+      control: {
+        type: "select",
+      },
+      options: icons,
+    },
+
+    variant: {
+      control: "radio",
+      map: {
+        none: null,
+        primary: "primary",
+        error: "error",
+      },
+      options: ["none", ...variantOptions],
+    },
+    size: {
+      control: "radio",
+      options: ["small", "medium", "large"],
+    },
+    children: { table: { disable: true } },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+export const Basic: Story = {
+  args: {
+    ...defaultProps,
+  },
+};