Add Props Icon for Sidebar Item SidebarSearchField and Settings

Signed-off-by: Dede Hamzah <dehamzah@gmail.com>

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}

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} />;
 };