From 11147862fec29d5ae36d077c4e1ae720a0c90bf4 Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Wed, 6 Dec 2023 11:22:03 +0100
Subject: [PATCH 1/4] feat: added possibility to define an individual icon

---
 .../db-overflow-menu/db-overflow-menu.tsx         |  9 ++++++++-
 .../stories/db-overflow-menu.stories.mdx          | 15 +++++++++++++++
 2 files changed, 23 insertions(+), 1 deletion(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-overflow-menu/db-overflow-menu.tsx b/packages/db-ui-elements-stencil/src/components/db-overflow-menu/db-overflow-menu.tsx
index 9eb72917d..9977f4bd5 100644
--- a/packages/db-ui-elements-stencil/src/components/db-overflow-menu/db-overflow-menu.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-overflow-menu/db-overflow-menu.tsx
@@ -22,6 +22,11 @@ export class DbOverflowMenu {
    */
   @Prop({ reflect: true }) summary = '';
 
+  /**
+   * Define an icon by it's identifier (like e.g. _download_, compare to [DB UI Icons](https://db-ui.github.io/core/patterns/base-icons/index.html)) to get displayed in front of the elements content.
+   */
+  @Prop({ reflect: true }) icon?: string;
+
   private compData: DbLinkType[];
 
   private hasItemsWrapper: boolean;
@@ -56,7 +61,9 @@ export class DbOverflowMenu {
         class="cmp-overflow-menu"
         data-horizontal-position={this.opposite && 'opposite'}
       >
-        <summary>{this.summary}</summary>
+        <summary>
+          {this.icon ? <db-icon icon={this.icon} /> : this.summary}
+        </summary>
         {this.compData && (
           <menu type="toolbar" innerHTML={getDefaultLinkData(this.compData)} />
         )}
diff --git a/packages/db-ui-elements-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx
index 4de28ce01..ba9e4c3f9 100644
--- a/packages/db-ui-elements-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx
@@ -67,6 +67,21 @@ Only `<button>` and `<a>` HTML tags work as items content.
   <db-overflow-menu data={mockData()} />
 </Canvas>
 
+<db-headline variant="2">overflow-menu with individual icon</db-headline>
+
+If you'd like to define an [individual icon](https://db-ui.github.io/core/patterns/base-icons/index.html) for the button that toggles the overflow-menu, you could define it via the `icon`-attribute.
+
+<Canvas>
+  <db-overflow-menu icon="add">
+    <li>
+      <db-button title="Title text">Modify</db-button>
+    </li>
+    <li>
+      <db-button title="Title text">Delete</db-button>
+    </li>
+  </db-overflow-menu>
+</Canvas>
+
 
 The data should be an object passed in with JSON.stringify()
 

From 119dd9d6a936d39da74895f154d2cfc283410d1c Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <Maximilian.Franzke@deutschebahn.com>
Date: Wed, 6 Dec 2023 11:35:20 +0100
Subject: [PATCH 2/4] feat: added possibility to define an individual icon

---
 .../components/db-dropdown/db-dropdown.tsx    |  9 ++++++++-
 .../stories/db-dropdown.stories.mdx           | 19 +++++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-dropdown/db-dropdown.tsx b/packages/db-ui-elements-stencil/src/components/db-dropdown/db-dropdown.tsx
index 9057ae158..9944ca4ba 100644
--- a/packages/db-ui-elements-stencil/src/components/db-dropdown/db-dropdown.tsx
+++ b/packages/db-ui-elements-stencil/src/components/db-dropdown/db-dropdown.tsx
@@ -22,6 +22,11 @@ export class DbDropdown {
    */
   @Prop({ reflect: true }) summary = '';
 
+  /**
+   * Define an icon by it's identifier (like e.g. _download_, compare to [DB UI Icons](https://db-ui.github.io/core/patterns/base-icons/index.html)) to get displayed in front of the elements content.
+   */
+  @Prop({ reflect: true }) icon?: string;
+
   private compData: DbLinkType[];
 
   private hasItemsWrapper: boolean;
@@ -56,7 +61,9 @@ export class DbDropdown {
         class="cmp-dropdown"
         data-horizontal-position={this.opposite && 'opposite'}
       >
-        <summary>{this.summary}</summary>
+        <summary>
+          {this.icon ? <db-icon icon={this.icon} /> : this.summary}
+        </summary>
         {this.compData && (
           <menu type="toolbar" innerHTML={getDefaultLinkData(this.compData)} />
         )}
diff --git a/packages/db-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx
index 9b8e23dd1..3d10dad16 100644
--- a/packages/db-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx
@@ -87,4 +87,23 @@ export type DbLinkType = {
 
 </StyledCanvas>
 
+<db-headline variant="2">dropdown with individual icon</db-headline>
+
+If you'd like to define an [individual icon](https://db-ui.github.io/core/patterns/base-icons/index.html) for the button that toggles the dropdown, you could define it via the `icon`-attribute.
+
+<Canvas>
+  <db-dropdown opposite icon="add">
+    <li>
+      <db-button title="Title text">
+        Modify
+      </db-button>
+    </li>
+    <li>
+      <db-button title="Title text">
+        Delete
+      </db-button>
+    </li>
+  </db-dropdown>
+</Canvas>
+
 <Readme />

From 024d671c99436cf9a1968e771c12a4640ef6b60c Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:08:49 +0100
Subject: [PATCH 3/4] Update db-overflow-menu.stories.mdx

---
 .../db-overflow-menu/stories/db-overflow-menu.stories.mdx       | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx
index ba9e4c3f9..d655df34b 100644
--- a/packages/db-ui-elements-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-overflow-menu/stories/db-overflow-menu.stories.mdx
@@ -69,7 +69,7 @@ Only `<button>` and `<a>` HTML tags work as items content.
 
 <db-headline variant="2">overflow-menu with individual icon</db-headline>
 
-If you'd like to define an [individual icon](https://db-ui.github.io/core/patterns/base-icons/index.html) for the button that toggles the overflow-menu, you could define it via the `icon`-attribute.
+If you'd like to define an [individual icon](https://db-ui.github.io/core/patterns/base-icons/index.html) for the button that toggles the `overflow-menu`, you could define it via the `icon`-attribute.
 
 <Canvas>
   <db-overflow-menu icon="add">

From fc4c0cec0f56e4a67f2b6ea2b1b21b1122b12a8e Mon Sep 17 00:00:00 2001
From: Maximilian Franzke <787658+mfranzke@users.noreply.github.com>
Date: Wed, 6 Dec 2023 14:09:14 +0100
Subject: [PATCH 4/4] Update db-dropdown.stories.mdx

---
 .../src/components/db-dropdown/stories/db-dropdown.stories.mdx  | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/db-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx b/packages/db-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx
index 3d10dad16..c3984bfab 100644
--- a/packages/db-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx
+++ b/packages/db-ui-elements-stencil/src/components/db-dropdown/stories/db-dropdown.stories.mdx
@@ -89,7 +89,7 @@ export type DbLinkType = {
 
 <db-headline variant="2">dropdown with individual icon</db-headline>
 
-If you'd like to define an [individual icon](https://db-ui.github.io/core/patterns/base-icons/index.html) for the button that toggles the dropdown, you could define it via the `icon`-attribute.
+If you'd like to define an [individual icon](https://db-ui.github.io/core/patterns/base-icons/index.html) for the button that toggles the `dropdown`, you could define it via the `icon`-attribute.
 
 <Canvas>
   <db-dropdown opposite icon="add">