diff --git a/.changeset/slow-insects-cheat.md b/.changeset/slow-insects-cheat.md
new file mode 100644
index 0000000000..e07d6d6f96
--- /dev/null
+++ b/.changeset/slow-insects-cheat.md
@@ -0,0 +1,8 @@
+---
+'@backstage/plugin-techdocs': patch
+'@backstage/plugin-catalog': patch
+'@backstage/plugin-explore': patch
+---
+
+Add ability to pass icon as function to have ability
+to customize it by search item
diff --git a/plugins/catalog/api-report.md b/plugins/catalog/api-report.md
index 6d746f6a7c..ee0ca180f4 100644
--- a/plugins/catalog/api-report.md
+++ b/plugins/catalog/api-report.md
@@ -117,7 +117,7 @@ export interface CatalogSearchResultListItemProps {
// (undocumented)
highlight?: ResultHighlight;
// (undocumented)
- icon?: ReactNode;
+ icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
// (undocumented)
rank?: number;
// (undocumented)
diff --git a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx
index a277584d2f..6d0b3e3038 100644
--- a/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx
+++ b/plugins/catalog/src/components/CatalogSearchResultListItem/CatalogSearchResultListItem.tsx
@@ -50,7 +50,7 @@ const useStyles = makeStyles(
* @public
*/
export interface CatalogSearchResultListItemProps {
- icon?: ReactNode;
+ icon?: ReactNode | ((result: IndexableDocument) => ReactNode);
result?: IndexableDocument;
highlight?: ResultHighlight;
rank?: number;
@@ -69,7 +69,11 @@ export function CatalogSearchResultListItem(
return (
- {props.icon &&
{props.icon}}
+ {props.icon && (
+
+ {typeof props.icon === 'function' ? props.icon(result) : props.icon}
+
+ )}
ReactNode);
// (undocumented)
rank?: number;
// (undocumented)
diff --git a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx b/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx
index eb12ba45d8..1aad122ee6 100644
--- a/plugins/explore/src/components/ToolSearchResultListItem/ToolSearchResultListItem.tsx
+++ b/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 && {props.icon}}
+ {props.icon && (
+
+ {typeof props.icon === 'function' ? props.icon(result) : props.icon}
+
+ )}
ReactNode);
result?: any;
highlight?: ResultHighlight;
rank?: number;
diff --git a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx
index 9bf8b76092..3c0d2314e2 100644
--- a/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx
+++ b/plugins/techdocs/src/search/components/TechDocsSearchResultListItem.tsx
@@ -37,7 +37,7 @@ const useStyles = makeStyles({
* @public
*/
export type TechDocsSearchResultListItemProps = {
- icon?: ReactNode;
+ icon?: ReactNode | ((result: any) => ReactNode);
result?: any;
highlight?: ResultHighlight;
rank?: number;
@@ -151,7 +151,11 @@ export const TechDocsSearchResultListItem = (
const ListItemWrapper = ({ children }: PropsWithChildren<{}>) =>
asListItem ? (
<>
- {icon && {icon}}
+ {icon && (
+
+ {typeof icon === 'function' ? icon(result) : icon}
+
+ )}
{children}
>
) : (