From 2c67d16e65cda9d8adc03307105cb024a8cd1183 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 27 Aug 2021 14:56:08 +0200
Subject: [PATCH 1/2] fix(Search): pass className to custom icons

---
 .../react/src/components/Search/Search-story.js     | 13 +++++++++++++
 packages/react/src/components/Search/Search.js      |  9 ++++++++-
 2 files changed, 21 insertions(+), 1 deletion(-)

diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js
index a43bd79ce169..0ea817903db9 100644
--- a/packages/react/src/components/Search/Search-story.js
+++ b/packages/react/src/components/Search/Search-story.js
@@ -17,6 +17,7 @@ import SearchLayoutButton from '../SearchLayoutButton';
 import ExpandableSearch from '../ExpandableSearch';
 import mdx from './Search.mdx';
 import { FeatureFlags } from '../FeatureFlags';
+import { Filter16 } from '@carbon/icons-react';
 
 // V11: Updated Size Table
 // const sizes = {
@@ -69,6 +70,18 @@ export default {
 
 export const Default = () => <Search {...props()} id="search-1" />;
 
+export const RenderIconTest = () => (
+  <>
+    <Search
+      renderIcon={<Filter16 />}
+      placeholder="Filter..."
+      id="search-filter"
+    />
+    <br />
+    <Search placeholder="Search..." id="search" />
+  </>
+);
+
 export const SizeStory = () => (
   <div>
     <div>
diff --git a/packages/react/src/components/Search/Search.js b/packages/react/src/components/Search/Search.js
index 6e0819f7dde8..b3255f333260 100644
--- a/packages/react/src/components/Search/Search.js
+++ b/packages/react/src/components/Search/Search.js
@@ -212,9 +212,16 @@ export default class Search extends Component {
       [`${prefix}--search-close--hidden`]: !hasContent,
     });
 
+    let customIcon;
+    if (renderIcon) {
+      customIcon = React.cloneElement(renderIcon, {
+        className: `${prefix}--search-magnifier-icon`,
+      });
+    }
+
     const searchId = `${id}-search`;
     const searchIcon = renderIcon ? (
-      renderIcon
+      customIcon
     ) : (
       <Search16 className={`${prefix}--search-magnifier-icon`} />
     );

From 6d8ea2688c6e993329acac2b5645dd83694982a6 Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Fri, 3 Sep 2021 11:01:12 +0200
Subject: [PATCH 2/2] chore(Storybook): remove test stories

---
 .../react/src/components/Search/Search-story.js     | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/react/src/components/Search/Search-story.js b/packages/react/src/components/Search/Search-story.js
index 0ea817903db9..a43bd79ce169 100644
--- a/packages/react/src/components/Search/Search-story.js
+++ b/packages/react/src/components/Search/Search-story.js
@@ -17,7 +17,6 @@ import SearchLayoutButton from '../SearchLayoutButton';
 import ExpandableSearch from '../ExpandableSearch';
 import mdx from './Search.mdx';
 import { FeatureFlags } from '../FeatureFlags';
-import { Filter16 } from '@carbon/icons-react';
 
 // V11: Updated Size Table
 // const sizes = {
@@ -70,18 +69,6 @@ export default {
 
 export const Default = () => <Search {...props()} id="search-1" />;
 
-export const RenderIconTest = () => (
-  <>
-    <Search
-      renderIcon={<Filter16 />}
-      placeholder="Filter..."
-      id="search-filter"
-    />
-    <br />
-    <Search placeholder="Search..." id="search" />
-  </>
-);
-
 export const SizeStory = () => (
   <div>
     <div>