diff --git a/.storybook/main.ts b/.storybook/main.ts
index 8df803d6..594f9a3b 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -6,8 +6,12 @@ import { StorybookConfig } from "@storybook/vue3-vite";
const fs = require("fs");
const path = require("path");
const mucIconsSvg = fs.readFileSync(
- path.resolve(__dirname, "../public/assets/temporary/muc-icons.svg"),
- "utf8"
+ path.resolve(__dirname, "../public/assets/temporary/muc-icons.svg"),
+ "utf8"
+);
+const customIconsSvg = fs.readFileSync(
+ path.resolve(__dirname, "../public/assets/temporary/custom-icons.svg"),
+ "utf8"
);
const config: StorybookConfig = {
@@ -27,6 +31,7 @@ const config: StorybookConfig = {
previewBody: (body) => `
${body}
${mucIconsSvg}
+ ${customIconsSvg}
`,
docs: {
autodocs: "tag",
diff --git a/docs/Iconography.mdx b/docs/Iconography.mdx
new file mode 100644
index 00000000..f5e3e722
--- /dev/null
+++ b/docs/Iconography.mdx
@@ -0,0 +1,24 @@
+import { Meta, IconGallery, IconItem } from '@storybook/blocks';
+
+
+
+# Iconography
+
+This library already contains MDE5-Patternlabs iconset. The documentation to it can be found [here](https://patternlab.muenchen.space/?p=viewall-guidelines-icons).
+
+Additionally, it adds some specialty icons from [Pictogrammers](https://pictogrammers.com/library/mdi) which can be accessed by embedding the SVG-Sprite `custom-icons.svg` as described in [the getting started guide](/docs/getting-started--docs#setup).
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/public/assets/temporary/custom-icons.svg b/public/assets/temporary/custom-icons.svg
new file mode 100644
index 00000000..93f44e3d
--- /dev/null
+++ b/public/assets/temporary/custom-icons.svg
@@ -0,0 +1,7 @@
+
+
\ No newline at end of file
diff --git a/public/assets/temporary/muc-icons.svg b/public/assets/temporary/muc-icons.svg
index 68e7ec55..61cc2657 100644
--- a/public/assets/temporary/muc-icons.svg
+++ b/public/assets/temporary/muc-icons.svg
@@ -1,4 +1,4 @@
-