Add ability to pass icon as function to have ability to customize it by search item

Signed-off-by: Ilya Savich <isavich@box.com>

plugins/explore/api-report.md

@@ -135,7 +135,7 @@ export interface ToolSearchResultListItemProps {
   // (undocumented)
   highlight?: ResultHighlight;
   // (undocumented)
-  icon?: ReactNode;
+  icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
   // (undocumented)
   rank?: number;
   // (undocumented)

plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx

@@ -46,7 +46,7 @@ const useStyles = makeStyles({
  * @public
  */
 export interface ToolSearchResultListItemProps {
-  icon?: ReactNode;
+  icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
   result?: IndexableDocument;
   highlight?: ResultHighlight;
   rank?: number;
@@ -62,7 +62,11 @@ export function ToolSearchResultListItem(props: ToolSearchResultListItemProps) {
 
   return (
     <>
-      {props.icon && <ListItemIcon>{props.icon}</ListItemIcon>}
+      {props.icon && (
+        <ListItemIcon>
+          {typeof props.icon === 'function' ? props.icon(result) : props.icon}
+        </ListItemIcon>
+      )}
       <div className={classes.flexContainer}>
         <ListItemText
           className={classes.itemText}