From 4891a8f2e6f8e3c0993b6826676ea97bf0592895 Mon Sep 17 00:00:00 2001
From: Dede Hamzah <dehamzah@gmail.com>
Date: Wed, 3 Nov 2021 16:08:27 +0700
Subject: [PATCH 1/3] Add Props Icon for Sidebar Item SidebarSearchField and
 Settings

Signed-off-by: Dede Hamzah <dehamzah@gmail.com>
---
 .../src/layout/Sidebar/Items.tsx                |  4 +++-
 .../user-settings/src/components/Settings.tsx   | 17 +++++++++--------
 2 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/core-components/src/layout/Sidebar/Items.tsx b/packages/core-components/src/layout/Sidebar/Items.tsx
index 883e0395cd..75317ed9ac 100644
--- a/packages/core-components/src/layout/Sidebar/Items.tsx
+++ b/packages/core-components/src/layout/Sidebar/Items.tsx
@@ -293,11 +293,13 @@ export const SidebarItem = forwardRef<any, SidebarItemProps>((props, ref) => {
 type SidebarSearchFieldProps = {
   onSearch: (input: string) => void;
   to?: string;
+  icon?: IconComponent;
 };
 
 export function SidebarSearchField(props: SidebarSearchFieldProps) {
   const [input, setInput] = useState('');
   const classes = useStyles();
+  const Icon = props.icon ? props.icon : SearchIcon;
 
   const search = () => {
     props.onSearch(input);
@@ -329,7 +331,7 @@ export function SidebarSearchField(props: SidebarSearchFieldProps) {
 
   return (
     <div className={classes.searchRoot}>
-      <SidebarItem icon={SearchIcon} to={props.to} onClick={handleItemClick}>
+      <SidebarItem icon={Icon} to={props.to} onClick={handleItemClick}>
         <TextField
           placeholder="Search"
           value={input}
diff --git a/plugins/user-settings/src/components/Settings.tsx b/plugins/user-settings/src/components/Settings.tsx
index deb8dddf58..43a00ee9cc 100644
--- a/plugins/user-settings/src/components/Settings.tsx
+++ b/plugins/user-settings/src/components/Settings.tsx
@@ -18,13 +18,14 @@ import React from 'react';
 import SettingsIcon from '@material-ui/icons/Settings';
 import { settingsRouteRef } from '../plugin';
 import { SidebarItem } from '@backstage/core-components';
+import { IconComponent } from '@backstage/core-plugin-api';
 
-export const Settings = () => {
-  return (
-    <SidebarItem
-      text="Settings"
-      to={settingsRouteRef.path}
-      icon={SettingsIcon}
-    />
-  );
+type SettingsProps = {
+  icon?: IconComponent;
+};
+
+export const Settings = (props: SettingsProps) => {
+  const Icon = props.icon ? props.icon : SettingsIcon;
+
+  return <SidebarItem text="Settings" to={settingsRouteRef.path} icon={Icon} />;
 };

From 274a4fc6335eff6091e995254636c98b7650d79e Mon Sep 17 00:00:00 2001
From: Dede Hamzah <dehamzah@gmail.com>
Date: Wed, 3 Nov 2021 16:11:23 +0700
Subject: [PATCH 2/3] add changeset

Signed-off-by: Dede Hamzah <dehamzah@gmail.com>
---
 .changeset/khaki-rice-kick.md | 6 ++++++
 1 file changed, 6 insertions(+)
 create mode 100644 .changeset/khaki-rice-kick.md

diff --git a/.changeset/khaki-rice-kick.md b/.changeset/khaki-rice-kick.md
new file mode 100644
index 0000000000..54819b855a
--- /dev/null
+++ b/.changeset/khaki-rice-kick.md
@@ -0,0 +1,6 @@
+---
+'@backstage/core-components': patch
+'@backstage/plugin-user-settings': patch
+---
+
+Add Props Icon for Sidebar Item SidebarSearchField and Settings

From b565119196897ad86fcf67d1899b96ce87514399 Mon Sep 17 00:00:00 2001
From: Dede Hamzah <dehamzah@gmail.com>
Date: Mon, 15 Nov 2021 14:19:28 +0700
Subject: [PATCH 3/3] update api report docs

Signed-off-by: Dede Hamzah <dehamzah@gmail.com>
---
 plugins/user-settings/api-report.md | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/plugins/user-settings/api-report.md b/plugins/user-settings/api-report.md
index 653e85a541..a801f2e807 100644
--- a/plugins/user-settings/api-report.md
+++ b/plugins/user-settings/api-report.md
@@ -37,10 +37,11 @@ export const ProviderSettingsItem: ({
 // @public (undocumented)
 export const Router: ({ providerSettings }: Props) => JSX.Element;
 
+// Warning: (ae-forgotten-export) The symbol "SettingsProps" needs to be exported by the entry point index.d.ts
 // Warning: (ae-missing-release-tag) "Settings" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //
 // @public (undocumented)
-export const Settings: () => JSX.Element;
+export const Settings: (props: SettingsProps) => JSX.Element;
 
 // Warning: (ae-missing-release-tag) "UserSettingsAppearanceCard" is exported by the package, but it is missing a release tag (@alpha, @beta, @public, or @internal)
 //