Merge pull request #7874 from dehamzah/override-icons

Add Props Icon for Sidebar Item SidebarSearchField and Settings

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)
 //

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