diff --git a/packages/twenty-front/src/index.tsx b/packages/twenty-front/src/index.tsx
index d1b39de14..89dc16376 100644
--- a/packages/twenty-front/src/index.tsx
+++ b/packages/twenty-front/src/index.tsx
@@ -11,6 +11,7 @@ import { AppErrorBoundary } from '@/error-handler/components/AppErrorBoundary';
import { PromiseRejectionEffect } from '@/error-handler/components/PromiseRejectionEffect';
import { ApolloMetadataClientProvider } from '@/object-metadata/components/ApolloMetadataClientProvider';
import { ObjectMetadataItemsProvider } from '@/object-metadata/components/ObjectMetadataItemsProvider';
+import { IconsProvider } from '@/ui/display/icon/components/IconsProvider';
import { DialogManager } from '@/ui/feedback/dialog-manager/components/DialogManager';
import { DialogManagerScope } from '@/ui/feedback/dialog-manager/scopes/DialogManagerScope';
import { SnackBarProvider } from '@/ui/feedback/snack-bar-manager/components/SnackBarProvider';
@@ -34,31 +35,33 @@ root.render(
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
index fe8c153b4..212bef9d3 100644
--- a/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
+++ b/packages/twenty-front/src/modules/activities/files/components/AttachmentIcon.tsx
@@ -5,7 +5,6 @@ import {
Attachment,
AttachmentType,
} from '@/activities/files/types/Attachment';
-import { IconComponent } from '@/ui/display/icon/types/IconComponent';
import {
IconFile,
IconFileText,
@@ -15,7 +14,8 @@ import {
IconPresentation,
IconTable,
IconVideo,
-} from '@/ui/input/constants/icons';
+} from '@/ui/display/icon';
+import { IconComponent } from '@/ui/display/icon/types/IconComponent';
const StyledIconContainer = styled.div<{ background: string }>`
align-items: center;
diff --git a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
index b6663117a..527b40cdb 100644
--- a/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
+++ b/packages/twenty-front/src/modules/object-metadata/components/ObjectMetadataNavItems.tsx
@@ -1,14 +1,13 @@
import { useLocation, useNavigate } from 'react-router-dom';
import { useObjectMetadataItemForSettings } from '@/object-metadata/hooks/useObjectMetadataItemForSettings';
-import { Icon123 } from '@/ui/input/constants/icons';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { NavigationDrawerItem } from '@/ui/navigation/navigation-drawer/components/NavigationDrawerItem';
export const ObjectMetadataNavItems = () => {
const { activeObjectMetadataItems } = useObjectMetadataItemForSettings();
const navigate = useNavigate();
- const { icons } = useLazyLoadIcons();
+ const { getIcon } = useIcons();
const currentPath = useLocation().pathname;
return (
@@ -20,9 +19,7 @@ export const ObjectMetadataNavItems = () => {
label={objectMetadataItem.labelPlural}
to={`/objects/${objectMetadataItem.namePlural}`}
active={currentPath == `/objects/${objectMetadataItem.namePlural}`}
- Icon={
- objectMetadataItem.icon ? icons[objectMetadataItem.icon] : Icon123
- }
+ Icon={getIcon(objectMetadataItem.icon)}
onClick={() => {
navigate(`/objects/${objectMetadataItem.namePlural}`);
}}
diff --git a/packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx b/packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx
index 4a8f6db57..8aa454760 100644
--- a/packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx
+++ b/packages/twenty-front/src/modules/object-record/components/RecordTablePage.tsx
@@ -10,7 +10,7 @@ import { useObjectNameSingularFromPlural } from '@/object-metadata/hooks/useObje
import { useCreateOneRecord } from '@/object-record/hooks/useCreateOneRecord';
import { RecordTableActionBar } from '@/object-record/record-table/action-bar/components/RecordTableActionBar';
import { RecordTableContextMenu } from '@/object-record/record-table/context-menu/components/RecordTableContextMenu';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { PageAddButton } from '@/ui/layout/page/PageAddButton';
import { PageBody } from '@/ui/layout/page/PageBody';
import { PageContainer } from '@/ui/layout/page/PageContainer';
@@ -36,11 +36,14 @@ export const RecordTablePage = () => {
const navigate = useNavigate();
- const { icons } = useLazyLoadIcons();
-
const { findObjectMetadataItemByNamePlural } =
useObjectMetadataItemForSettings();
+ const { getIcon } = useIcons();
+ const Icon = getIcon(
+ findObjectMetadataItemByNamePlural(objectNamePlural)?.icon,
+ );
+
useEffect(() => {
if (
!isNonEmptyString(objectNamePlural) &&
@@ -64,12 +67,7 @@ export const RecordTablePage = () => {
title={
objectNamePlural.charAt(0).toUpperCase() + objectNamePlural.slice(1)
}
- Icon={
- icons[
- findObjectMetadataItemByNamePlural(objectNamePlural)!.icon ??
- 'Icon123'
- ]
- }
+ Icon={Icon}
>
diff --git a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
index 0b78a42ce..93bc71a1b 100644
--- a/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-filter-dropdown/components/ObjectFilterDropdownFilterSelect.tsx
@@ -1,6 +1,6 @@
import { useFilterDropdown } from '@/object-record/object-filter-dropdown/hooks/useFilterDropdown';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { MenuItem } from '@/ui/navigation/menu-item/components/MenuItem';
import { useSetHotkeyScope } from '@/ui/utilities/hotkey/hooks/useSetHotkeyScope';
@@ -15,7 +15,7 @@ export const ObjectFilterDropdownFilterSelect = () => {
availableFilterDefinitions,
} = useFilterDropdown();
- const { icons } = useLazyLoadIcons();
+ const { getIcon } = useIcons();
const setHotkeyScope = useSetHotkeyScope();
@@ -40,7 +40,7 @@ export const ObjectFilterDropdownFilterSelect = () => {
setObjectFilterDropdownSearchInput('');
}}
- LeftIcon={icons[availableFilterDefinition.iconName]}
+ LeftIcon={getIcon(availableFilterDefinition.iconName)}
text={availableFilterDefinition.label}
/>
))}
diff --git a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
index a6c9f962b..ed3f8e3ca 100644
--- a/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
+++ b/packages/twenty-front/src/modules/object-record/object-sort-dropdown/components/ObjectSortDropdownButton.tsx
@@ -3,8 +3,8 @@ import { useCallback, useState } from 'react';
import { useSortDropdown } from '@/object-record/object-sort-dropdown/hooks/useSortDropdown';
import { ObjectSortDropdownScope } from '@/object-record/object-sort-dropdown/scopes/ObjectSortDropdownScope';
import { IconChevronDown } from '@/ui/display/icon';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { LightButton } from '@/ui/input/button/components/LightButton';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
import { Dropdown } from '@/ui/layout/dropdown/components/Dropdown';
import { DropdownMenuHeader } from '@/ui/layout/dropdown/components/DropdownMenuHeader';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
@@ -68,7 +68,7 @@ export const ObjectSortDropdownButton = ({
resetState();
};
- const { icons } = useLazyLoadIcons();
+ const { getIcon } = useIcons();
return (
@@ -117,7 +117,7 @@ export const ObjectSortDropdownButton = ({
testId={`select-sort-${index}`}
key={index}
onClick={() => handleAddSort(availableSortDefinition)}
- LeftIcon={icons[availableSortDefinition.iconName]}
+ LeftIcon={getIcon(availableSortDefinition.iconName)}
text={availableSortDefinition.label}
/>
))}
diff --git a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
index 396a42311..e84c30178 100644
--- a/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-inline-cell/components/RecordInlineCell.tsx
@@ -1,7 +1,7 @@
import { useContext } from 'react';
import { RelationPickerHotkeyScope } from '@/object-record/relation-picker/types/RelationPickerHotkeyScope';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { FieldDisplay } from '../../field/components/FieldDisplay';
import { FieldInput } from '../../field/components/FieldInput';
@@ -59,7 +59,7 @@ export const RecordInlineCell = () => {
closeInlineCell();
};
- const { icons } = useLazyLoadIcons();
+ const { getIcon } = useIcons();
return (
{
}
: undefined
}
- IconLabel={icons[fieldDefinition.iconName]}
+ IconLabel={getIcon(fieldDefinition.iconName)}
editModeContent={
{
const theme = useTheme();
- const { icons, isLoadingIcons } = useLazyLoadIcons();
- const Icon = icons[column.iconName];
+ const { getIcon } = useIcons();
+ const Icon = getIcon(column.iconName);
return (
<>
- {!isLoadingIcons && }
+
{column.label}
diff --git a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
index d7c19abe8..5a0ce8d67 100644
--- a/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
+++ b/packages/twenty-front/src/modules/object-record/record-table/components/RecordTableHeaderPlusButtonContent.tsx
@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
import { useRecoilValue } from 'recoil';
import { IconSettings } from '@/ui/display/icon';
-import { useLazyLoadIcons } from '@/ui/input/hooks/useLazyLoadIcons';
+import { useIcons } from '@/ui/display/icon/hooks/useIcons';
import { DropdownMenuItemsContainer } from '@/ui/layout/dropdown/components/DropdownMenuItemsContainer';
import { DropdownMenuSeparator } from '@/ui/layout/dropdown/components/DropdownMenuSeparator';
import { useDropdown } from '@/ui/layout/dropdown/hooks/useDropdown';
@@ -22,8 +22,7 @@ export const RecordTableHeaderPlusButtonContent = () => {
const hiddenTableColumns = useRecoilValue(hiddenTableColumnsSelector);
- const { icons } = useLazyLoadIcons();
-
+ const { getIcon } = useIcons();
const { handleColumnVisibilityChange } = useTableColumns();
const handleAddColumn = useCallback(
@@ -46,7 +45,7 @@ export const RecordTableHeaderPlusButtonContent = () => {