From 6ec974f10cf5d9d2240f5c5481b82586fe95c2df Mon Sep 17 00:00:00 2001
From: Oliver Sand <oliver.sand@nordeck.net>
Date: Thu, 24 Mar 2022 10:18:46 +0100
Subject: [PATCH] fix(Dropdown): Fix missing rendering of icons in selection
 mode

Closes #4346
---
 .../DropdownExampleSearchSelectionIcon.js     | 20 +++++++++++++++++++
 .../examples/modules/Dropdown/Types/index.js  |  9 ++++++++-
 src/modules/Dropdown/Dropdown.js              |  3 ++-
 3 files changed, 30 insertions(+), 2 deletions(-)
 create mode 100644 docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchSelectionIcon.js

diff --git a/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchSelectionIcon.js b/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchSelectionIcon.js
new file mode 100644
index 0000000000..c447b22ab6
--- /dev/null
+++ b/docs/src/examples/modules/Dropdown/Types/DropdownExampleSearchSelectionIcon.js
@@ -0,0 +1,20 @@
+import React from 'react'
+import { Dropdown } from 'semantic-ui-react'
+
+const packageManagersOptions = [
+  { key: 'gem', value: 'gem', icon: 'gem', text: 'RubyGems' },
+  { key: 'npm', value: 'npm', icon: 'npm', text: 'NPM' },
+  { key: 'docker', value: 'docker', icon: 'docker', text: 'Docker' },
+]
+
+const DropdownExampleSearchSelection = () => (
+  <Dropdown
+    placeholder='Select Package Manager'
+    fluid
+    search
+    selection
+    options={packageManagersOptions}
+  />
+)
+
+export default DropdownExampleSearchSelection
diff --git a/docs/src/examples/modules/Dropdown/Types/index.js b/docs/src/examples/modules/Dropdown/Types/index.js
index 95a324878d..ff540f0f10 100644
--- a/docs/src/examples/modules/Dropdown/Types/index.js
+++ b/docs/src/examples/modules/Dropdown/Types/index.js
@@ -26,7 +26,14 @@ const DropdownTypesExamples = () => (
       description='A selection dropdown can allow a user to search through a large list of choices.'
       examplePath='modules/Dropdown/Types/DropdownExampleSearchSelection'
     />
-    <ComponentExample examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionTwo' />
+    <ComponentExample
+      title='Search Selection with Text'
+      examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionTwo'
+    />
+    <ComponentExample
+      title='Search Selection with Icon'
+      examplePath='modules/Dropdown/Types/DropdownExampleSearchSelectionIcon'
+    />
     {/* Possibly add state selection example. */}
     <ComponentExample
       title='Multiple Selection'
diff --git a/src/modules/Dropdown/Dropdown.js b/src/modules/Dropdown/Dropdown.js
index ff4530ec75..5f93e79181 100644
--- a/src/modules/Dropdown/Dropdown.js
+++ b/src/modules/Dropdown/Dropdown.js
@@ -39,7 +39,7 @@ const getKeyAndValues = (options) =>
   options ? options.map((option) => _.pick(option, ['key', 'value'])) : options
 
 function renderItemContent(item) {
-  const { flag, image, text } = item
+  const { flag, image, icon, text } = item
 
   // TODO: remove this in v3
   // This maintains compatibility with Shorthand API in v1 as this might be called in "Label.create()"
@@ -52,6 +52,7 @@ function renderItemContent(item) {
       <>
         {Flag.create(flag)}
         {Image.create(image)}
+        {Icon.create(icon)}
 
         {text}
       </>