From 84f8c14e5264c8d3145ba6acef04c1628fc7abd3 Mon Sep 17 00:00:00 2001
From: Anoop P <44577841+anoopw3bdev@users.noreply.github.com>
Date: Mon, 8 Apr 2024 19:14:01 +0530
Subject: [PATCH] Implement context specific icon in breadcrumb navigation
 (#4839)

fixes #4834

<img width="447" alt="Screenshot 2024-04-05 at 4 13 21 PM"
src="https://github.com/twentyhq/twenty/assets/44577841/036f6c51-c6c5-4e15-a895-e356ca230e5c">

<img width="437" alt="Screenshot 2024-04-05 at 4 13 35 PM"
src="https://github.com/twentyhq/twenty/assets/44577841/335d0317-43b2-4827-9cf7-42373b3953f5">

---------

Co-authored-by: Thomas Trompette <thomast@twenty.com>
---
 .../src/pages/object-record/RecordShowPage.tsx            | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
index f82058488..bb649ea19 100644
--- a/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
+++ b/packages/twenty-front/src/pages/object-record/RecordShowPage.tsx
@@ -1,13 +1,13 @@
 import { useEffect } from 'react';
 import { useParams } from 'react-router-dom';
 import { useSetRecoilState } from 'recoil';
-import { IconBuildingSkyscraper } from 'twenty-ui';
 
 import { useFavorites } from '@/favorites/hooks/useFavorites';
 import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
 import { useFindOneRecord } from '@/object-record/hooks/useFindOneRecord';
 import { RecordShowContainer } from '@/object-record/record-show/components/RecordShowContainer';
 import { recordStoreFamilyState } from '@/object-record/record-store/states/recordStoreFamilyState';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
 import { PageBody } from '@/ui/layout/page/PageBody';
 import { PageContainer } from '@/ui/layout/page/PageContainer';
 import { PageFavoriteButton } from '@/ui/layout/page/PageFavoriteButton';
@@ -41,6 +41,10 @@ export const RecordShowPage = () => {
     recordStoreFamilyState(objectRecordId),
   );
 
+  const { getIcon } = useIcons();
+
+  const headerIcon = getIcon(objectMetadataItem?.icon);
+
   const { record, loading } = useFindOneRecord({
     objectRecordId,
     objectNameSingular,
@@ -83,7 +87,7 @@ export const RecordShowPage = () => {
       <PageHeader
         title={pageName ?? ''}
         hasBackButton
-        Icon={IconBuildingSkyscraper}
+        Icon={headerIcon}
         loading={loading}
       >
         {record && (