Make use of the useApp hook to retrieve search icon

Signed-off-by: Rik Claessens <rhmclaessens@gmail.com>

.changeset/sixty-rabbits-cheat.md

@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-search-react': minor
+---
+
+Make use of the useApp hook to retrieve the specified search icon in the SearchBar

plugins/search-react/src/components/SearchBar/SearchBar.tsx

@@ -18,13 +18,14 @@ import {
   AnalyticsContext,
   configApiRef,
   useApi,
+  useApp,
 } from '@backstage/core-plugin-api';
 import IconButton from '@material-ui/core/IconButton';
 import InputAdornment from '@material-ui/core/InputAdornment';
 import TextField from '@material-ui/core/TextField';
 import Button from '@material-ui/core/Button';
 import { TextFieldProps } from '@material-ui/core/TextField';
-import SearchIcon from '@material-ui/icons/Search';
+import DefaultSearchIcon from '@material-ui/icons/Search';
 import React, {
   ChangeEvent,
   ComponentType,
@@ -146,6 +147,8 @@ export const SearchBarBase: ForwardRefExoticComponent<SearchBarBaseProps> =
         placeholder ??
         `Search in ${configApi.getOptionalString('app.title') || 'Backstage'}`;
 
+      const SearchIcon = useApp().getSystemIcon('search') || DefaultSearchIcon;
+
       const startAdornment = (
         <InputAdornment position="start">
           <IconButton aria-label="Query" size="small" disabled>