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>

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 && (