perf: import MUI icons by path instead of the barrel

eslint.config.js

@@ -41,6 +41,19 @@ module.exports = [
       'no-undef': 2,
       'no-undef-init': 2,
       'no-tabs': 2,
+      // The @mui/icons-material barrel re-exports ~10,800 modules that every
+      // consumer's bundler has to parse. Import icons by path instead.
+      'no-restricted-imports': [
+        2,
+        {
+          paths: [
+            {
+              name: '@mui/icons-material',
+              message: "Import icons by path, e.g. '@mui/icons-material/Search'.",
+            },
+          ],
+        },
+      ],
       'react/self-closing-comp': 2,
       'react/no-typos': 2,
       'react/jsx-no-duplicate-props': 'warn',

src/components/ExpandButton.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { IconButton } from '@mui/material';
-import { KeyboardArrowRight as KeyboardArrowRightIcon, Remove as RemoveIcon } from '@mui/icons-material';
+import KeyboardArrowRightIcon from '@mui/icons-material/KeyboardArrowRight';
+import RemoveIcon from '@mui/icons-material/Remove';
 
 const ExpandButton = ({
   areAllRowsExpanded,

src/components/Popover.js

@@ -1,7 +1,7 @@
 import React, { useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { Popover as MuiPopover, IconButton } from '@mui/material';
-import { Close as CloseIcon } from '@mui/icons-material';
+import CloseIcon from '@mui/icons-material/Close';
 
 const Popover = ({ className, trigger, refExit, hide, content, ...providedProps }) => {
   const [isOpen, open] = useState(false);

src/components/TableHeadCell.js

@@ -1,5 +1,5 @@
 import { Button, TableCell, TableSortLabel, Tooltip as MuiTooltip } from '@mui/material';
-import { Help as HelpIcon } from '@mui/icons-material';
+import HelpIcon from '@mui/icons-material/Help';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import React, { useState } from 'react';

src/components/TableSearch.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Grow, TextField, IconButton } from '@mui/material';
-import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
 import { makeStyles } from 'tss-react/mui';
 
 const useStyles = makeStyles({ name: 'MUIDataTableSearch' })((theme) => ({

src/components/TableToolbar.js

@@ -1,12 +1,10 @@
 import React from 'react';
 import { Typography, Toolbar, IconButton, Tooltip as MuiTooltip } from '@mui/material';
-import {
-  Search as SearchIcon,
-  CloudDownload as DownloadIcon,
-  Print as PrintIcon,
-  ViewColumn as ViewColumnIcon,
-  FilterList as FilterIcon,
-} from '@mui/icons-material';
+import SearchIcon from '@mui/icons-material/Search';
+import DownloadIcon from '@mui/icons-material/CloudDownload';
+import PrintIcon from '@mui/icons-material/Print';
+import ViewColumnIcon from '@mui/icons-material/ViewColumn';
+import FilterIcon from '@mui/icons-material/FilterList';
 import Popover from './Popover';
 import TableFilter from './TableFilter';
 import TableViewCol from './TableViewCol';

src/components/TableToolbarSelect.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Paper, IconButton, Typography, Tooltip as MuiTooltip } from '@mui/material';
-import { Delete as DeleteIcon } from '@mui/icons-material';
+import DeleteIcon from '@mui/icons-material/Delete';
 import { withStyles } from 'tss-react/mui';
 
 const defaultToolbarSelectStyles = (theme) => ({

src/plug-ins/DebounceSearchRender.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { Grow, TextField, IconButton } from '@mui/material';
-import { Search as SearchIcon, Clear as ClearIcon } from '@mui/icons-material';
+import SearchIcon from '@mui/icons-material/Search';
+import ClearIcon from '@mui/icons-material/Clear';
 import { withStyles } from 'tss-react/mui';
 
 function debounce(func, wait, immediate) {