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 {
-    Person as UserIcon,
-    Topic as TopicIcon,
-    CloudCircle as CloudCircleIcon,
-} from '@mui/icons-material';
+import UserIcon from '@mui/icons-material/Person';
+import TopicIcon from '@mui/icons-material/Topic';
+import CloudCircleIcon from '@mui/icons-material/CloudCircle';
 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 {
-    CheckCircle,
-    CloudCircle,
-    Flag,
-    WarningAmberRounded,
-} from '@mui/icons-material';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import CloudCircle from '@mui/icons-material/CloudCircle';
+import Flag from '@mui/icons-material/Flag';
+import WarningAmberRounded from '@mui/icons-material/WarningAmberRounded';
 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 {
-    Extension,
-    FlagRounded,
-    Report,
-    SvgIconComponent,
-    Timeline,
-} from '@mui/icons-material';
+import Extension from '@mui/icons-material/Extension';
+import FlagRounded from '@mui/icons-material/FlagRounded';
+import Report from '@mui/icons-material/Report';
+import Timeline from '@mui/icons-material/Timeline';
 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 {
-    Check,
-    ErrorOutlineRounded,
-    InfoOutlined,
-    WarningAmber,
-} from '@mui/icons-material';
+import Check from '@mui/icons-material/Check';
+import ErrorOutlineRounded from '@mui/icons-material/ErrorOutlineRounded';
+import InfoOutlined from '@mui/icons-material/InfoOutlined';
+import WarningAmber from '@mui/icons-material/WarningAmber';
 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 {
-    Cancel,
-    CheckCircle,
-    Schedule,
-    Edit,
-    Error as ErrorIcon,
-    PauseCircle,
-} from '@mui/icons-material';
+import Cancel from '@mui/icons-material/Cancel';
+import CheckCircle from '@mui/icons-material/CheckCircle';
+import Schedule from '@mui/icons-material/Schedule';
+import Edit from '@mui/icons-material/Edit';
+import ErrorIcon from '@mui/icons-material/Error';
+import PauseCircle from '@mui/icons-material/PauseCircle';
 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';