fix: icon imports (#6499)

Based on this article:
https://mui.com/material-ui/guides/minimizing-bundle-size/ importing
from `'@mui/icons-material'` instead of specifying the actual path to
the icon like `import Delete from '@mui/icons-material/Delete';` can be
up to six time slower. This change changes all named imports in Unleash
referencing the `@mui/icons-material` to default imports.

This reduced the amount of modules we had to process when building the
frontend from 15206 to 4746

Before:
<img width="1016" alt="Skjermbilde 2024-03-11 kl 14 19 58"
src="https://github.com/Unleash/unleash/assets/16081982/f137d24a-6557-4183-a40f-f62a33524520">

After:
<img width="1237" alt="Skjermbilde 2024-03-11 kl 14 20 32"
src="https://github.com/Unleash/unleash/assets/16081982/05a27d6a-2c3f-4409-9862-7188ab4b9c72">

Build time locally decreased by around 50%

Before:
<img width="1504" alt="Skjermbilde 2024-03-11 kl 14 31 45"
src="https://github.com/Unleash/unleash/assets/16081982/bc931559-b022-47ed-9f8f-c87401578518">


After:
<img width="1219" alt="Skjermbilde 2024-03-11 kl 14 27 00"
src="https://github.com/Unleash/unleash/assets/16081982/3c3a8d6b-576d-45c3-aa40-cc5f95d9df2b">

frontend/src/component/accessOverview/AccessOverview.tsx

@@ -1,5 +1,5 @@
 import { IconButton } from '@mui/material';
-import { Download } from '@mui/icons-material';
+import Download from '@mui/icons-material/Download';
 import { useAccessOverviewApi } from 'hooks/api/actions/useAccessOverviewApi/useAccessOverviewApi';
 
 export const AccessOverview = () => {

frontend/src/component/admin/apiToken/ApiTokenForm/EnvironmentSelector/EnvironmentSelector.tsx

@@ -1,5 +1,5 @@
 import { TokenType } from '../../../../../interfaces/token';
-import { KeyboardArrowDownOutlined } from '@mui/icons-material';
+import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
 import React from 'react';
 import {
     StyledInputDescription,

frontend/src/component/admin/banners/BannerModal/BannerForm.tsx

@@ -7,7 +7,7 @@ import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 import Input from 'component/common/Input/Input';
 import { BannerVariant } from 'interfaces/banner';
 import { ChangeEvent, Dispatch, SetStateAction, useState } from 'react';
-import { Visibility } from '@mui/icons-material';
+import Visibility from '@mui/icons-material/Visibility';
 import { BannerDialog } from 'component/banners/Banner/BannerDialog/BannerDialog';
 
 const StyledForm = styled('div')(({ theme }) => ({

frontend/src/component/admin/banners/BannersTable/BannersActionsCell.tsx

@@ -1,4 +1,5 @@
-import { Delete, Edit } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
 import { Box, styled } from '@mui/material';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';

frontend/src/component/admin/groups/Group/Group.tsx

@@ -18,7 +18,9 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCell';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
-import { Add, Delete, Edit } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { MainHeader } from 'component/common/MainHeader/MainHeader';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';

frontend/src/component/admin/groups/GroupForm/GroupFormUsersTable/GroupFormUsersTable.tsx

@@ -4,7 +4,7 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { IGroupUser } from 'interfaces/group';
 import { HighlightCell } from 'component/common/Table/cells/HighlightCell/HighlightCell';
 import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
-import { Delete } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { VirtualizedTable } from 'component/common/Table';
 import { useFlexLayout, useSortBy, useTable } from 'react-table';

frontend/src/component/admin/groups/GroupsList/GroupCard/GroupCardActions/GroupCardActions.tsx

@@ -10,7 +10,10 @@ import {
     Tooltip,
     Typography,
 } from '@mui/material';
-import { Delete, Edit, GroupRounded, MoreVert } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
+import GroupRounded from '@mui/icons-material/GroupRounded';
+import MoreVert from '@mui/icons-material/MoreVert';
 import { Link } from 'react-router-dom';
 
 const StyledActions = styled('div')(({ theme }) => ({

frontend/src/component/admin/groups/GroupsList/GroupsList.tsx

@@ -14,7 +14,7 @@ import { GroupCard } from './GroupCard/GroupCard';
 import { GroupEmpty } from './GroupEmpty/GroupEmpty';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 import { NAVIGATE_TO_CREATE_GROUP } from 'utils/testIds';
 import { EditGroupUsers } from '../Group/EditGroupUsers/EditGroupUsers';
 import { RemoveGroup } from '../RemoveGroup/RemoveGroup';

frontend/src/component/admin/instance-admin/InstanceStats/InstanceStats.tsx

@@ -1,4 +1,4 @@
-import { Download } from '@mui/icons-material';
+import Download from '@mui/icons-material/Download';
 import {
     Button,
     Table,

frontend/src/component/admin/roles/RoleForm/RolePermissionCategories/RolePermissionCategories.tsx

@@ -1,8 +1,6 @@
-import {
+import UserIcon from '@mui/icons-material/Person';
-    Person as UserIcon,
+import TopicIcon from '@mui/icons-material/Topic';
-    Topic as TopicIcon,
+import CloudCircleIcon from '@mui/icons-material/CloudCircle';
-    CloudCircle as CloudCircleIcon,
-} from '@mui/icons-material';
 import {
     ENVIRONMENT_PERMISSION_TYPE,
     PROJECT_PERMISSION_TYPE,

frontend/src/component/admin/roles/RoleForm/RolePermissionCategories/RolePermissionCategory.tsx

@@ -12,7 +12,7 @@ import {
     styled,
     Typography,
 } from '@mui/material';
-import { ExpandMore } from '@mui/icons-material';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import { ICheckedPermissions, IPermission } from 'interfaces/permissions';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { getRoleKey } from 'utils/permissions';

frontend/src/component/admin/roles/RolesPage.tsx

@@ -10,7 +10,7 @@ import { useRoles } from 'hooks/api/getters/useRoles/useRoles';
 import { Search } from 'component/common/Search/Search';
 import theme from 'themes/theme';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import { IRole } from 'interfaces/role';
 import { TabLink } from 'component/common/TabNav/TabLink';

frontend/src/component/admin/roles/RolesTable/RolesActionsCell/RolesActionsCell.tsx

@@ -1,4 +1,5 @@
-import { Delete, Edit } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
 import { Box, styled } from '@mui/material';
 import { PREDEFINED_ROLE_TYPES } from '@server/util/constants';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';

frontend/src/component/admin/roles/RolesTable/RolesTable.tsx

@@ -13,7 +13,7 @@ import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';
 import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColumns';
 import { useSearch } from 'hooks/useSearch';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
-import { SupervisedUserCircle } from '@mui/icons-material';
+import SupervisedUserCircle from '@mui/icons-material/SupervisedUserCircle';
 import { RolesActionsCell } from './RolesActionsCell/RolesActionsCell';
 import { RolesCell } from './RolesCell/RolesCell';
 import { RoleDeleteDialog } from './RoleDeleteDialog/RoleDeleteDialog';

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountModal/ServiceAccountTokens/ServiceAccountTokens.tsx

@@ -1,4 +1,4 @@
-import { Delete } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
 import {
     Button,
     IconButton,

frontend/src/component/admin/serviceAccounts/ServiceAccountsTable/ServiceAccountsActionsCell/ServiceAccountsActionsCell.tsx

@@ -1,4 +1,5 @@
-import { Delete, Edit } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
 import { Box, styled } from '@mui/material';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';

frontend/src/component/admin/users/AccessMatrix/PermissionsTable.tsx

@@ -4,7 +4,8 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import { useFlexLayout, useSortBy, useTable } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
-import { Check, Close } from '@mui/icons-material';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
 import { Box } from '@mui/material';
 import { IMatrixPermission } from 'interfaces/permissions';
 

frontend/src/component/admin/users/InactiveUsersList/InactiveUsersActionCell/InactiveUsersActionCell.tsx

@@ -2,7 +2,7 @@ import React, { VFC } from 'react';
 import { Box, styled } from '@mui/material';
 import PermissionIconButton from '../../../../common/PermissionIconButton/PermissionIconButton';
 import { ADMIN } from '../../../../providers/AccessProvider/permissions';
-import { Delete } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
 
 const StyledBox = styled(Box)(() => ({
     display: 'flex',

frontend/src/component/admin/users/UsersList/UserTypeCell/UserTypeCell.tsx

@@ -1,4 +1,4 @@
-import { AttachMoneyRounded } from '@mui/icons-material';
+import AttachMoneyRounded from '@mui/icons-material/AttachMoneyRounded';
 import { styled, Tooltip } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { TextCell } from 'component/common/Table/cells/TextCell/TextCell';

frontend/src/component/admin/users/UsersList/UsersActionsCell/UsersActionsCell.tsx

@@ -1,4 +1,8 @@
-import { Delete, Edit, Key, Lock, LockReset } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
+import Key from '@mui/icons-material/Key';
+import Lock from '@mui/icons-material/Lock';
+import LockReset from '@mui/icons-material/LockReset';
 import { Box, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';

frontend/src/component/admin/users/UsersList/UsersList.tsx

@@ -33,7 +33,7 @@ import { useConditionallyHiddenColumns } from 'hooks/useConditionallyHiddenColum
 import { UserLimitWarning } from './UserLimitWarning/UserLimitWarning';
 import { RoleCell } from 'component/common/Table/cells/RoleCell/RoleCell';
 import { useSearch } from 'hooks/useSearch';
-import { Download } from '@mui/icons-material';
+import Download from '@mui/icons-material/Download';
 import { StyledUsersLinkDiv } from '../Users.styles';
 import { useUiFlag } from 'hooks/useUiFlag';
 

frontend/src/component/application/Application.tsx

@@ -10,7 +10,8 @@ import {
     Typography,
     styled,
 } from '@mui/material';
-import { Delete, Link as LinkIcon } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import LinkIcon from '@mui/icons-material/Link';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { UPDATE_APPLICATION } from 'component/providers/AccessProvider/permissions';
 import { ConnectedInstances } from './ConnectedInstances/ConnectedInstances';

frontend/src/component/application/ApplicationChart.tsx

@@ -8,12 +8,10 @@ import {
 } from 'openapi';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { HelpIcon } from '../common/HelpIcon/HelpIcon';
-import {
+import CheckCircle from '@mui/icons-material/CheckCircle';
-    CheckCircle,
+import CloudCircle from '@mui/icons-material/CloudCircle';
-    CloudCircle,
+import Flag from '@mui/icons-material/Flag';
-    Flag,
+import WarningAmberRounded from '@mui/icons-material/WarningAmberRounded';
-    WarningAmberRounded,
-} from '@mui/icons-material';
 import TimeAgo from 'react-timeago';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { getApplicationIssueMode } from './ApplicationIssues/ApplicationIssues';

frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx

@@ -11,7 +11,7 @@ import {
     Tabs,
     Typography,
 } from '@mui/material';
-import { Link as LinkIcon } from '@mui/icons-material';
+import LinkIcon from '@mui/icons-material/Link';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { UPDATE_APPLICATION } from 'component/providers/AccessProvider/permissions';
 import { ApplicationUpdate } from '../ApplicationUpdate/ApplicationUpdate';

frontend/src/component/application/ApplicationIssues/ApplicationIssues.tsx

@@ -1,6 +1,6 @@
 import { Box, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { WarningAmberRounded } from '@mui/icons-material';
+import WarningAmberRounded from '@mui/icons-material/WarningAmberRounded';
 import { ApplicationOverviewSchema } from 'openapi';
 import { Link } from 'react-router-dom';
 import {

frontend/src/component/application/ApplicationList/ApplicationList.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Avatar, CircularProgress, Icon, Link } from '@mui/material';
-import { Warning } from '@mui/icons-material';
+import Warning from '@mui/icons-material/Warning';
 import { styles as themeStyles } from 'component/common';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';

frontend/src/component/application/ApplicationList/PaginatedApplicationList.tsx

@@ -1,6 +1,6 @@
 import { useMemo } from 'react';
 import { Avatar, Icon, Link } from '@mui/material';
-import { Warning } from '@mui/icons-material';
+import Warning from '@mui/icons-material/Warning';
 import { styles as themeStyles } from 'component/common';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';

frontend/src/component/application/ApplicationOverview.tsx

@@ -11,7 +11,7 @@ import { useNavigate } from 'react-router-dom';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useEffect } from 'react';
 import { useFeedback } from '../feedbackNew/useFeedback';
-import { ReviewsOutlined } from '@mui/icons-material';
+import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined';
 
 const StyledDivider = styled(Divider)(({ theme }) => ({
     marginTop: theme.spacing(2),

frontend/src/component/application/ApplicationView/ApplicationView.tsx

@@ -9,13 +9,10 @@ import {
     Typography,
     Divider,
 } from '@mui/material';
-import {
+import Extension from '@mui/icons-material/Extension';
-    Extension,
+import FlagRounded from '@mui/icons-material/FlagRounded';
-    FlagRounded,
+import Report from '@mui/icons-material/Report';
-    Report,
+import Timeline from '@mui/icons-material/Timeline';
-    SvgIconComponent,
-    Timeline,
-} from '@mui/icons-material';
 import {
     CREATE_FEATURE,
     CREATE_STRATEGY,
@@ -82,7 +79,7 @@ export const ApplicationView = () => {
         viewUrl: string;
         name: string;
         description: string;
-        Icon: SvgIconComponent;
+        Icon: React.ElementType;
         i: number;
     }) => (
         <ListItem key={`found_${name}-${i}`}>

frontend/src/component/archive/ArchiveTable/ArchiveBatchActions.tsx

@@ -1,6 +1,7 @@
 import { FC, useState } from 'react';
 import { Button } from '@mui/material';
-import { Delete, Undo } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Undo from '@mui/icons-material/Undo';
 import {
     DELETE_FEATURE,
     UPDATE_FEATURE,

frontend/src/component/archive/ArchiveTable/ArchivedFeatureActionCell/ArchivedFeatureActionCell.tsx

@@ -1,6 +1,7 @@
 import { VFC } from 'react';
 import { ActionCell } from 'component/common/Table/cells/ActionCell/ActionCell';
-import { Delete, Undo } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Undo from '@mui/icons-material/Undo';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import {
     DELETE_FEATURE,

frontend/src/component/banners/Banner/Banner.tsx

@@ -1,9 +1,7 @@
-import {
+import Check from '@mui/icons-material/Check';
-    Check,
+import ErrorOutlineRounded from '@mui/icons-material/ErrorOutlineRounded';
-    ErrorOutlineRounded,
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
-    InfoOutlined,
+import WarningAmber from '@mui/icons-material/WarningAmber';
-    WarningAmber,
-} from '@mui/icons-material';
 import { styled, Icon, Link } from '@mui/material';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { useNavigate } from 'react-router-dom';

frontend/src/component/changeRequest/ChangeRequest/Changes/Change/ChangeActions.tsx

@@ -23,7 +23,9 @@ import {
     Tooltip,
     Typography,
 } from '@mui/material';
-import { Delete, Edit, MoreVert } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
+import MoreVert from '@mui/icons-material/MoreVert';
 import { EditChange } from './EditChange';
 
 const useShowActions = (changeRequest: ChangeRequestType, change: IChange) => {

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewStatus/ChangeRequestReviewStatus.styles.ts

@@ -1,12 +1,10 @@
 import { styled } from '@mui/material';
-import {
+import Cancel from '@mui/icons-material/Cancel';
-    Cancel,
+import CheckCircle from '@mui/icons-material/CheckCircle';
-    CheckCircle,
+import Schedule from '@mui/icons-material/Schedule';
-    Schedule,
+import Edit from '@mui/icons-material/Edit';
-    Edit,
+import ErrorIcon from '@mui/icons-material/Error';
-    Error as ErrorIcon,
+import PauseCircle from '@mui/icons-material/PauseCircle';
-    PauseCircle,
-} from '@mui/icons-material';
 import { Box, Typography, Divider } from '@mui/material';
 
 const styledComponentPropCheck = () => (prop: string) =>

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestReviewers/ChangeRequestReviewer.tsx

@@ -1,8 +1,8 @@
 import { Box, styled, Typography } from '@mui/material';
 import { FC } from 'react';
 import { StyledAvatar } from '../ChangeRequestHeader/ChangeRequestHeader.styles';
-import { CheckCircle, Cancel } from '@mui/icons-material';
+import CheckCircle from '@mui/icons-material/CheckCircle';
-
+import Cancel from '@mui/icons-material/Cancel';
 interface IChangeRequestReviewerProps {
     name?: string;
     imageUrl?: string;

frontend/src/component/changeRequest/ChangeRequestOverview/ChangeRequestTimeline/ChangeRequestTimeline.tsx

@@ -11,7 +11,7 @@ import {
     ChangeRequestState,
 } from '../../changeRequest.types';
 import { HtmlTooltip } from '../../../common/HtmlTooltip/HtmlTooltip';
-import { Error as ErrorIcon } from '@mui/icons-material';
+import ErrorIcon from '@mui/icons-material/Error';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { formatDateYMDHMS } from 'utils/formatDate';
 

frontend/src/component/changeRequest/ChangeRequestSidebar/ChangeRequestSidebar.tsx

@@ -3,7 +3,7 @@ import { Box, Button, styled, Typography } from '@mui/material';
 import { DynamicSidebarModal } from 'component/common/SidebarModal/SidebarModal';
 import { PageContent } from 'component/common/PageContent/PageContent';
 import { PageHeader } from 'component/common/PageHeader/PageHeader';
-import { CheckCircle } from '@mui/icons-material';
+import CheckCircle from '@mui/icons-material/CheckCircle';
 import { ChangeRequest } from '../ChangeRequest/ChangeRequest';
 import { usePendingChangeRequests } from 'hooks/api/getters/usePendingChangeRequests/usePendingChangeRequests';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';

frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/ChangeRequestTitle.tsx

@@ -2,7 +2,7 @@ import React, { FC, useState } from 'react';
 import { Box, Button, IconButton, styled, Typography } from '@mui/material';
 import Input from 'component/common/Input/Input';
 import { ChangeRequestType } from '../../changeRequest.types';
-import { Edit } from '@mui/icons-material';
+import Edit from '@mui/icons-material/Edit';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useChangeRequestApi } from 'hooks/api/actions/useChangeRequestApi/useChangeRequestApi';
 import { formatUnknownError } from 'utils/formatUnknownError';

frontend/src/component/changeRequest/ChangeRequestSidebar/EnvironmentChangeRequest/EnvironmentChangeRequest.tsx

@@ -17,7 +17,7 @@ import {
     StyledFlexAlignCenterBox,
     StyledSuccessIcon,
 } from '../ChangeRequestSidebar';
-import { CloudCircle } from '@mui/icons-material';
+import CloudCircle from '@mui/icons-material/CloudCircle';
 import { AddCommentField } from '../../ChangeRequestOverview/ChangeRequestComments/AddCommentField';
 import { useAuthUser } from 'hooks/api/getters/useAuth/useAuthUser';
 import Input from 'component/common/Input/Input';

frontend/src/component/changeRequest/ChangeRequestSidebar/ReviewChangesHeader/ReviewChangesHeader.tsx

@@ -1,5 +1,5 @@
 import { Box, styled, Tooltip } from '@mui/material';
-import { HelpOutline } from '@mui/icons-material';
+import HelpOutline from '@mui/icons-material/HelpOutline';
 import { FC } from 'react';
 import { PageHeader } from '../../../common/PageHeader/PageHeader';
 

frontend/src/component/changeRequest/ChangeRequestStatusBadge/ChangeRequestStatusBadge.tsx

@@ -1,14 +1,12 @@
 import { VFC } from 'react';
 import { ChangeRequestType } from '../changeRequest.types';
 import { Badge } from 'component/common/Badge/Badge';
-import {
+import AccessTime from '@mui/icons-material/AccessTime';
-    AccessTime,
+import Check from '@mui/icons-material/Check';
-    Check,
+import CircleOutlined from '@mui/icons-material/CircleOutlined';
-    CircleOutlined,
+import Close from '@mui/icons-material/Close';
-    Close,
+import ErrorIcon from '@mui/icons-material/Error';
-    Error as ErrorIcon,
+import PauseCircle from '@mui/icons-material/PauseCircle';
-    PauseCircle,
-} from '@mui/icons-material';
 import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 interface IChangeRequestStatusBadgeProps {

frontend/src/component/common/ApiTokenTable/CopyApiTokenButton/CopyApiTokenButton.tsx

@@ -1,7 +1,7 @@
 import { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
 import useToast from 'hooks/useToast';
 import copy from 'copy-to-clipboard';
-import { FileCopy } from '@mui/icons-material';
+import FileCopy from '@mui/icons-material/FileCopy';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 
 interface ICopyApiTokenButtonProps {

frontend/src/component/common/ApiTokenTable/CreateApiTokenButton/CreateApiTokenButton.tsx

@@ -1,7 +1,7 @@
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import { CREATE_API_TOKEN_BUTTON } from 'utils/testIds';
 import { useNavigate } from 'react-router-dom';
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 interface ICreateApiTokenButton {
     path: string;
     permission: string | string[];

frontend/src/component/common/ApiTokenTable/RemoveApiTokenButton/RemoveApiTokenButton.tsx

@@ -1,4 +1,4 @@
-import { Delete } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
 import { styled } from '@mui/material';
 import { IApiToken } from 'hooks/api/getters/useApiTokens/useApiTokens';
 import { useState } from 'react';

frontend/src/component/common/ApiTokenTable/useApiTokenTable.tsx

@@ -7,7 +7,7 @@ import { TimeAgoCell } from 'component/common/Table/cells/TimeAgoCell/TimeAgoCel
 import { useTable, useGlobalFilter, useSortBy } from 'react-table';
 import { sortTypes } from 'utils/sortTypes';
 import { ProjectsList } from 'component/admin/apiToken/ProjectsList/ProjectsList';
-import { Key } from '@mui/icons-material';
+import Key from '@mui/icons-material/Key';
 
 export const useApiTokenTable = (
     tokens: IApiToken[],

frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx

@@ -1,5 +1,5 @@
 import { useStyles } from 'component/common/AutocompleteBox/AutocompleteBox.styles';
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 import {
     Autocomplete,
     InputAdornment,

frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx

@@ -1,4 +1,5 @@
-import { Check, Close } from '@mui/icons-material';
+import Check from '@mui/icons-material/Check';
+import Close from '@mui/icons-material/Close';
 import { styled } from '@mui/material';
 
 interface ICheckMarkBadgeProps {

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconButton, styled, Tooltip } from '@mui/material';
-import { Delete, Edit } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
 import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender';
 
 interface ConstraintAccordionHeaderActionsProps {

frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx

@@ -5,7 +5,7 @@ import React, {
     useImperativeHandle,
 } from 'react';
 import { Button, styled, Tooltip } from '@mui/material';
-import { HelpOutline } from '@mui/icons-material';
+import HelpOutline from '@mui/icons-material/HelpOutline';
 import { IConstraint } from 'interfaces/strategy';
 import { ConstraintAccordion } from 'component/common/ConstraintAccordion/ConstraintAccordion';
 import produce from 'immer';

frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx

@@ -1,6 +1,6 @@
 import { VFC } from 'react';
 import { Box } from '@mui/material';
-import { TrackChanges } from '@mui/icons-material';
+import TrackChanges from '@mui/icons-material/TrackChanges';
 
 interface IConstraintIconProps {
     compact?: boolean;

frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx

@@ -1,5 +1,5 @@
 import { TextField, InputAdornment, Chip } from '@mui/material';
-import { Search } from '@mui/icons-material';
+import Search from '@mui/icons-material/Search';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IConstraintValueSearchProps {

frontend/src/component/common/DropdownMenu/DropdownMenu.tsx

@@ -6,7 +6,7 @@ import {
     VFC,
 } from 'react';
 import { Menu } from '@mui/material';
-import { ArrowDropDown } from '@mui/icons-material';
+import ArrowDropDown from '@mui/icons-material/ArrowDropDown';
 import { DropdownButton } from './DropdownButton/DropdownButton';
 
 export interface IDropdownMenuProps {

frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx

@@ -1,5 +1,5 @@
 import { useTheme } from '@mui/material/styles';
-import { Cloud } from '@mui/icons-material';
+import Cloud from '@mui/icons-material/Cloud';
 
 interface IEnvironmentIcon {
     enabled: boolean;

frontend/src/component/common/ExperimentalFeedback/ExperimentalFeedback.tsx

@@ -1,6 +1,7 @@
 import { useState, useEffect } from 'react';
 import { Box, Button, Divider, Typography, styled } from '@mui/material';
-import { PermMedia, Send } from '@mui/icons-material';
+import PermMedia from '@mui/icons-material/PermMedia';
+import Send from '@mui/icons-material/Send';
 import { CustomEvents, usePlausibleTracker } from 'hooks/usePlausibleTracker';
 import { createLocalStorage } from 'utils/createLocalStorage';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/common/FavoriteIconButton/FavoriteIconButton.tsx

@@ -1,10 +1,8 @@
 import { VFC } from 'react';
 import { IconButton, IconButtonProps } from '@mui/material';
 import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
-import {
+import StarIcon from '@mui/icons-material/Star';
-    Star as StarIcon,
+import StarBorderIcon from '@mui/icons-material/StarBorder';
-    StarBorder as StarBorderIcon,
-} from '@mui/icons-material';
 import { TooltipResolver } from '../TooltipResolver/TooltipResolver';
 
 interface IFavoriteIconButtonProps extends IconButtonProps {

frontend/src/component/common/FormTemplate/FormTemplate.tsx

@@ -8,8 +8,9 @@ import {
     Divider,
     styled,
 } from '@mui/material';
-import { FileCopy, Info } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import FileCopy from '@mui/icons-material/FileCopy';
+import Info from '@mui/icons-material/Info';
 import Loader from '../Loader/Loader';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';

frontend/src/component/common/GeneralSelect/GeneralSelect.tsx

@@ -8,7 +8,7 @@ import {
     SelectChangeEvent,
 } from '@mui/material';
 import { SELECT_ITEM_ID } from 'utils/testIds';
-import { KeyboardArrowDownOutlined } from '@mui/icons-material';
+import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
 import { SxProps } from '@mui/system';
 import { Theme } from '@mui/material/styles';
 

frontend/src/component/common/HelpIcon/HelpIcon.tsx

@@ -1,5 +1,5 @@
 import { styled, Tooltip, TooltipProps } from '@mui/material';
-import { HelpOutline } from '@mui/icons-material';
+import HelpOutline from '@mui/icons-material/HelpOutline';
 import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 
 const StyledContainer = styled('span')<{ size: string | undefined }>(

frontend/src/component/common/InstanceStatus/InstanceStatusBar.tsx

@@ -1,7 +1,8 @@
 import { styled, Button, Typography } from '@mui/material';
 import { IInstanceStatus, InstancePlan } from 'interfaces/instance';
 import { INSTANCE_STATUS_BAR_ID } from 'utils/testIds';
-import { InfoOutlined, WarningAmber } from '@mui/icons-material';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
+import WarningAmber from '@mui/icons-material/WarningAmber';
 import { useNavigate } from 'react-router-dom';
 import { useContext } from 'react';
 import AccessContext from 'contexts/AccessContext';

frontend/src/component/common/ItemList/ItemList.tsx

@@ -1,4 +1,4 @@
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 import { Button, Chip, Stack, styled } from '@mui/material';
 import Input from 'component/common/Input/Input';
 import { useState } from 'react';

frontend/src/component/common/NewConstraintAccordion/ConstraintAccordionHeaderActions/ConstraintAccordionHeaderActions.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { IconButton, styled, Tooltip } from '@mui/material';
-import { Delete, Edit, Undo } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
+import Undo from '@mui/icons-material/Undo';
 import { ConditionallyRender } from '../../ConditionallyRender/ConditionallyRender';
 import { IConstraint } from 'interfaces/strategy';
 

frontend/src/component/common/NewConstraintAccordion/ConstraintIcon.tsx

@@ -1,6 +1,6 @@
 import { VFC } from 'react';
 import { Box } from '@mui/material';
-import { TrackChanges } from '@mui/icons-material';
+import TrackChanges from '@mui/icons-material/TrackChanges';
 
 interface IConstraintIconProps {
     compact?: boolean;

frontend/src/component/common/NewConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx

@@ -1,5 +1,5 @@
 import { TextField, InputAdornment, Chip } from '@mui/material';
-import { Search } from '@mui/icons-material';
+import Search from '@mui/icons-material/Search';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IConstraintValueSearchProps {

frontend/src/component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList.tsx

@@ -1,6 +1,6 @@
 import React, { forwardRef, Fragment, useImperativeHandle } from 'react';
 import { styled, Tooltip } from '@mui/material';
-import { HelpOutline } from '@mui/icons-material';
+import HelpOutline from '@mui/icons-material/HelpOutline';
 import { IConstraint } from 'interfaces/strategy';
 import produce from 'immer';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';

frontend/src/component/common/Notifications/Notification.tsx

@@ -12,7 +12,7 @@ import {
 } from 'openapi';
 import { ReactComponent as ChangesAppliedIcon } from 'assets/icons/merge.svg';
 import TimeAgo from 'react-timeago';
-import { ToggleOffOutlined } from '@mui/icons-material';
+import ToggleOffOutlined from '@mui/icons-material/ToggleOffOutlined';
 import { flexRow } from 'themes/themeStyles';
 
 const StyledContainerBox = styled(Box, {

frontend/src/component/common/PasswordField/PasswordField.tsx

@@ -4,7 +4,8 @@ import {
     TextField,
     TextFieldProps,
 } from '@mui/material';
-import { Visibility, VisibilityOff } from '@mui/icons-material';
+import Visibility from '@mui/icons-material/Visibility';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
 import React, { useState, VFC } from 'react';
 
 const PasswordField: VFC<TextFieldProps> = ({ ...rest }) => {

frontend/src/component/common/PermissionButton/PermissionButton.tsx

@@ -1,5 +1,5 @@
 import { Button, ButtonProps } from '@mui/material';
-import { Lock } from '@mui/icons-material';
+import Lock from '@mui/icons-material/Lock';
 import React from 'react';
 import {
     TooltipResolver,

frontend/src/component/common/RoleBadge/RoleBadge.tsx

@@ -1,7 +1,7 @@
 import { Badge } from 'component/common/Badge/Badge';
 import { HtmlTooltip } from 'component/common/HtmlTooltip/HtmlTooltip';
 import { useRole } from 'hooks/api/getters/useRole/useRole';
-import { Person as UserIcon } from '@mui/icons-material';
+import UserIcon from '@mui/icons-material/Person';
 import { RoleDescription } from 'component/common/RoleDescription/RoleDescription';
 
 interface IRoleBadgeProps {

frontend/src/component/common/RoleDescription/RoleDescription.tsx

@@ -1,5 +1,5 @@
 import { SxProps, Theme, styled } from '@mui/material';
-import { SupervisedUserCircle } from '@mui/icons-material';
+import SupervisedUserCircle from '@mui/icons-material/SupervisedUserCircle';
 import { ConditionallyRender } from '../ConditionallyRender/ConditionallyRender';
 import { useRole } from 'hooks/api/getters/useRole/useRole';
 import {

frontend/src/component/common/Search/Search.tsx

@@ -8,7 +8,8 @@ import {
     styled,
     Tooltip,
 } from '@mui/material';
-import { Close, Search as SearchIcon } from '@mui/icons-material';
+import Close from '@mui/icons-material/Close';
+import SearchIcon from '@mui/icons-material/Search';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { SearchSuggestions } from './SearchSuggestions/SearchSuggestions';
 import { IGetSearchContextOutput } from 'hooks/useSearch';

frontend/src/component/common/Search/SearchSuggestions/SearchHistory.tsx

@@ -1,4 +1,4 @@
-import { History } from '@mui/icons-material';
+import History from '@mui/icons-material/History';
 import { Box, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { VFC } from 'react';

frontend/src/component/common/Search/SearchSuggestions/SearchSuggestions.tsx

@@ -1,4 +1,5 @@
-import { FilterList, History } from '@mui/icons-material';
+import FilterList from '@mui/icons-material/FilterList';
+import History from '@mui/icons-material/History';
 import { Box, Divider, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {

frontend/src/component/common/SegmentItem/SegmentItem.tsx

@@ -1,6 +1,6 @@
 import { useState, VFC } from 'react';
 import { Link } from 'react-router-dom';
-import { DonutLarge } from '@mui/icons-material';
+import DonutLarge from '@mui/icons-material/DonutLarge';
 import { ISegment } from 'interfaces/segment';
 import {
     Accordion,

frontend/src/component/common/StrategyItemContainer/StrategyItemContainer.tsx

@@ -1,5 +1,5 @@
 import { DragEventHandler, FC, ReactNode } from 'react';
-import { DragIndicator } from '@mui/icons-material';
+import DragIndicator from '@mui/icons-material/DragIndicator';
 import { Box, IconButton, styled } from '@mui/material';
 import { IFeatureStrategy } from 'interfaces/strategy';
 import {

frontend/src/component/common/Table/FavoriteIconHeader/FavoriteIconHeader.tsx

@@ -1,9 +1,7 @@
 import { useState, VFC } from 'react';
 import { IconButton } from '@mui/material';
-import {
+import StarIcon from '@mui/icons-material/Star';
-    Star as StarIcon,
+import StarBorderIcon from '@mui/icons-material/StarBorder';
-    StarBorder as StarBorderIcon,
-} from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { TooltipResolver } from '../../TooltipResolver/TooltipResolver';
 

frontend/src/component/common/Table/SortableTableHeader/CellSortable/SortArrow/SortArrow.tsx

@@ -1,9 +1,7 @@
 import { VFC } from 'react';
-import {
+import KeyboardArrowDown from '@mui/icons-material/KeyboardArrowDown';
-    KeyboardArrowDown,
+import KeyboardArrowUp from '@mui/icons-material/KeyboardArrowUp';
-    KeyboardArrowUp,
+import UnfoldMoreOutlined from '@mui/icons-material/UnfoldMoreOutlined';
-    UnfoldMoreOutlined,
-} from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import classnames from 'classnames';
 import { Theme } from '@mui/material';

frontend/src/component/common/Table/cells/FavoriteIconCell/FavoriteIconCell.tsx

@@ -1,9 +1,7 @@
 import { VFC } from 'react';
 import { Box, IconButton, styled } from '@mui/material';
-import {
+import StarIcon from '@mui/icons-material/Star';
-    Star as StarIcon,
+import StarBorderIcon from '@mui/icons-material/StarBorder';
-    StarBorder as StarBorderIcon,
-} from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const StyledCell = styled(Box)(({ theme }) => ({

frontend/src/component/common/index.jsx

@@ -12,7 +12,7 @@ import {
     Avatar,
     Typography,
 } from '@mui/material';
-import { Apps } from '@mui/icons-material';
+import Apps from '@mui/icons-material/Apps';
 
 import styles from './common.module.scss';
 import { ConditionallyRender } from './ConditionallyRender/ConditionallyRender';

frontend/src/component/context/ContectFormChip/ContextFormChip.tsx

@@ -1,4 +1,4 @@
-import { Cancel } from '@mui/icons-material';
+import Cancel from '@mui/icons-material/Cancel';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { styled } from '@mui/material';
 

frontend/src/component/context/ContextForm/ContextForm.tsx

@@ -9,7 +9,7 @@ import {
     Link,
 } from '@mui/material';
 import React, { useState, useEffect } from 'react';
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 import { ILegalValue } from 'interfaces/context';
 import { ContextFormChip } from 'component/context/ContectFormChip/ContextFormChip';
 import { ContextFormChipList } from 'component/context/ContectFormChip/ContextFormChipList';

frontend/src/component/context/ContextList/AddContextButton.tsx

@@ -1,7 +1,7 @@
 import { VFC } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useMediaQuery } from '@mui/material';
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { CREATE_CONTEXT_FIELD } from 'component/providers/AccessProvider/permissions';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';

frontend/src/component/context/ContextList/ContextActionsCell.tsx

@@ -1,6 +1,7 @@
 import { VFC } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Delete, Edit } from '@mui/icons-material';
+import Delete from '@mui/icons-material/Delete';
+import Edit from '@mui/icons-material/Edit';
 import {
     DELETE_CONTEXT_FIELD,
     UPDATE_CONTEXT_FIELD,

frontend/src/component/context/ContextList/ContextList/ContextList.tsx

@@ -21,7 +21,7 @@ import { SearchHighlightProvider } from 'component/common/Table/SearchHighlightC
 import { sortTypes } from 'utils/sortTypes';
 import { LinkCell } from 'component/common/Table/cells/LinkCell/LinkCell';
 import { ContextActionsCell } from '../ContextActionsCell';
-import { Adjust } from '@mui/icons-material';
+import Adjust from '@mui/icons-material/Adjust';
 import { IconCell } from 'component/common/Table/cells/IconCell/IconCell';
 import { Search } from 'component/common/Search/Search';
 import { UsedInCell } from '../UsedInCell';

frontend/src/component/demo/DemoDialog/DemoDialogPlans/DemoDialogPlans.tsx

@@ -1,7 +1,7 @@
 import { Button, Typography, styled } from '@mui/material';
 import { DemoDialog } from '../DemoDialog';
-import { GitHub } from '@mui/icons-material';
+import GitHub from '@mui/icons-material/GitHub';
-import { Launch } from '@mui/icons-material';
+import Launch from '@mui/icons-material/Launch';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 const StyledDemoDialog = styled(DemoDialog)(({ theme }) => ({

frontend/src/component/demo/DemoDialog/DemoDialogWelcome/DemoDialogWelcome.tsx

@@ -1,7 +1,7 @@
 import { Button, Divider, Typography, styled } from '@mui/material';
 import demoQR from 'assets/img/demo-qr.png';
 import { formatAssetPath } from 'utils/formatPath';
-import { Launch } from '@mui/icons-material';
+import Launch from '@mui/icons-material/Launch';
 import { DemoDialog } from '../DemoDialog';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 

frontend/src/component/demo/DemoTopics/DemoTopics.tsx

@@ -9,7 +9,9 @@ import {
     linearProgressClasses,
     styled,
 } from '@mui/material';
-import { CheckCircle, CircleOutlined, ExpandMore } from '@mui/icons-material';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import CircleOutlined from '@mui/icons-material/CircleOutlined';
+import ExpandMore from '@mui/icons-material/ExpandMore';
 import { ITutorialTopic } from '../demo-topics';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ReactComponent as StarsIcon } from 'assets/img/stars.svg';

frontend/src/component/environments/CreateEnvironmentButton/CreateEnvironmentButton.tsx

@@ -1,5 +1,5 @@
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useNavigate } from 'react-router-dom';

frontend/src/component/environments/EnvironmentTable/EnvironmentActionCell/EnvironmentActionCellPopover/EnvironmentActionCellPopover.tsx

@@ -18,13 +18,11 @@ import {
     DELETE_ENVIRONMENT,
     UPDATE_ENVIRONMENT,
 } from 'component/providers/AccessProvider/permissions';
-import {
+import Delete from '@mui/icons-material/Delete';
-    Delete,
+import Edit from '@mui/icons-material/Edit';
-    Edit,
+import CopyIcon from '@mui/icons-material/AddToPhotos';
-    AddToPhotos as CopyIcon,
+import VisibilityOffOutlined from '@mui/icons-material/VisibilityOffOutlined';
-    VisibilityOffOutlined,
+import VisibilityOutlined from '@mui/icons-material/VisibilityOutlined';
-    VisibilityOutlined,
-} from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const StyledMenuList = styled(MenuList)(({ theme }) => ({

frontend/src/component/environments/EnvironmentTable/EnvironmentIconCell/EnvironmentIconCell.tsx

@@ -1,7 +1,8 @@
 import { VFC } from 'react';
 import { styled } from '@mui/material';
 import { Box, IconButton } from '@mui/material';
-import { CloudCircle, DragIndicator } from '@mui/icons-material';
+import CloudCircle from '@mui/icons-material/CloudCircle';
+import DragIndicator from '@mui/icons-material/DragIndicator';
 import { IEnvironment } from 'interfaces/environments';
 
 const StyledCell = styled(Box)(({ theme }) => ({

frontend/src/component/executiveDashboard/components/DashboardHeader/DashboardHeader.tsx

@@ -1,7 +1,7 @@
 import { ReactNode, VFC } from 'react';
 import { useUiFlag } from 'hooks/useUiFlag';
 import { useFeedback } from 'component/feedbackNew/useFeedback';
-import { ReviewsOutlined } from '@mui/icons-material';
+import ReviewsOutlined from '@mui/icons-material/ReviewsOutlined';
 import {
     Button,
     Typography,

frontend/src/component/executiveDashboard/components/DashboardHeader/ShareLink/ShareLink.tsx

@@ -1,5 +1,5 @@
 import { VFC, useState } from 'react';
-import { Share } from '@mui/icons-material';
+import Share from '@mui/icons-material/Share';
 import { Box, Button, Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { LinkField } from 'component/admin/users/LinkField/LinkField';

frontend/src/component/executiveDashboard/componentsStat/FlagStats/FlagStats.tsx

@@ -1,4 +1,4 @@
-import { Settings } from '@mui/icons-material';
+import Settings from '@mui/icons-material/Settings';
 import { Box, Typography, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 

frontend/src/component/executiveDashboard/componentsStat/UserStats/UserStats.tsx

@@ -1,5 +1,5 @@
 import { type FC } from 'react';
-import { ChevronRight } from '@mui/icons-material';
+import ChevronRight from '@mui/icons-material/ChevronRight';
 import { Box, Typography, styled } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useUiFlag } from 'hooks/useUiFlag';

frontend/src/component/feature/CopyFeature/CopyFeature.tsx

@@ -9,7 +9,7 @@ import {
     Alert,
     styled,
 } from '@mui/material';
-import { FileCopy } from '@mui/icons-material';
+import FileCopy from '@mui/icons-material/FileCopy';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import { trim } from 'component/common/util';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx

@@ -1,7 +1,7 @@
 import classnames from 'classnames';
 import { Link, useNavigate } from 'react-router-dom';
 import useMediaQuery from '@mui/material/useMediaQuery';
-import { Add } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { NAVIGATE_TO_CREATE_FEATURE } from 'utils/testIds';
 import { useCreateFeaturePath } from 'component/feature/CreateFeatureButton/useCreateFeaturePath';

frontend/src/component/feature/FeatureForm/FeatureForm.tsx

@@ -11,7 +11,7 @@ import {
 import FeatureTypeSelect from '../FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect';
 import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from 'utils/testIds';
 import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
-import { KeyboardArrowDownOutlined } from '@mui/icons-material';
+import KeyboardArrowDownOutlined from '@mui/icons-material/KeyboardArrowDownOutlined';
 import { projectFilterGenerator } from 'utils/projectFilterGenerator';
 import FeatureProjectSelect from '../FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/feature/FeatureStrategy/FeatureStrategyConstraints/FeatureStrategyConstraintAccordionList/FeatureStrategyConstraintAccordionList.tsx

@@ -1,6 +1,7 @@
 import React, { forwardRef, RefObject } from 'react';
 import { Box, Button, styled, Tooltip, Typography } from '@mui/material';
-import { Add, HelpOutline } from '@mui/icons-material';
+import Add from '@mui/icons-material/Add';
+import HelpOutline from '@mui/icons-material/HelpOutline';
 import { IConstraint } from 'interfaces/strategy';
 
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';

frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/CopyButton/CopyButton.tsx

@@ -7,7 +7,7 @@ import {
     MenuItem,
     Tooltip,
 } from '@mui/material';
-import { Lock } from '@mui/icons-material';
+import Lock from '@mui/icons-material/Lock';
 import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { IFeatureEnvironment } from 'interfaces/featureToggle';
 import AccessContext from 'contexts/AccessContext';

frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx

@@ -7,7 +7,7 @@ import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/perm
 import { Popover, styled } from '@mui/material';
 import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards';
 import { formatCreateStrategyPath } from '../FeatureStrategyCreate/FeatureStrategyCreate';
-import { MoreVert } from '@mui/icons-material';
+import MoreVert from '@mui/icons-material/MoreVert';
 import { usePlausibleTracker } from 'hooks/usePlausibleTracker';
 
 interface IFeatureStrategyMenuProps {

frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx

@@ -1,7 +1,9 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { ISegment } from 'interfaces/segment';
-import { Clear, VisibilityOff, Visibility } from '@mui/icons-material';
+import Clear from '@mui/icons-material/Clear';
+import VisibilityOff from '@mui/icons-material/VisibilityOff';
+import Visibility from '@mui/icons-material/Visibility';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { constraintAccordionListId } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
 import { styled, Theme, Tooltip } from '@mui/material';