packages/cli: disallow importing all of @material-ui/icons

packages/cli/config/eslint.js

@@ -57,6 +57,19 @@ module.exports = {
       'warn',
       { vars: 'all', args: 'after-used', ignoreRestSiblings: true },
     ],
+
+    // Importing the entire MUI icons packages kills build performance as the list of icons is huge.
+    'no-restricted-imports': [
+      2,
+      {
+        paths: [
+          {
+            name: '@material-ui/icons',
+            message: "Please import '@material-ui/icons/<Icon>' instead.",
+          },
+        ],
+      },
+    ],
   },
   overrides: [
     {

packages/core/src/api/app/LoginPage/LoginPage.tsx

@@ -15,7 +15,7 @@
  */
 
 import React, { FC, useState } from 'react';
-import { GitHub as GitHubIcon } from '@material-ui/icons';
+import GitHubIcon from '@material-ui/icons/GitHub';
 import Page from '../../../layout/Page';
 import Header from '../../../layout/Header';
 import Content from '../../../layout/Content/Content';

packages/core/src/components/Table/Table.tsx

@@ -27,23 +27,21 @@ import { BackstageTheme } from '@backstage/theme';
 import { makeStyles, useTheme } from '@material-ui/core';
 
 // Material-table is not using the standard icons available in in material-ui. https://github.com/mbrn/material-table/issues/51
-import {
-  AddBox,
-  ArrowUpward,
-  Check,
-  ChevronLeft,
-  ChevronRight,
-  Clear,
-  DeleteOutline,
-  Edit,
-  FilterList,
-  FirstPage,
-  LastPage,
-  Remove,
-  SaveAlt,
-  Search,
-  ViewColumn,
-} from '@material-ui/icons';
+import AddBox from '@material-ui/icons/AddBox';
+import ArrowUpward from '@material-ui/icons/ArrowUpward';
+import Check from '@material-ui/icons/Check';
+import ChevronLeft from '@material-ui/icons/ChevronLeft';
+import ChevronRight from '@material-ui/icons/ChevronRight';
+import Clear from '@material-ui/icons/Clear';
+import DeleteOutline from '@material-ui/icons/DeleteOutline';
+import Edit from '@material-ui/icons/Edit';
+import FilterList from '@material-ui/icons/FilterList';
+import FirstPage from '@material-ui/icons/FirstPage';
+import LastPage from '@material-ui/icons/LastPage';
+import Remove from '@material-ui/icons/Remove';
+import SaveAlt from '@material-ui/icons/SaveAlt';
+import Search from '@material-ui/icons/Search';
+import ViewColumn from '@material-ui/icons/ViewColumn';
 
 const tableIcons = {
   Add: forwardRef((props, ref: React.Ref<SVGSVGElement>) => (

plugins/catalog/src/components/ComponentContextMenu/ComponentContextMenu.tsx

@@ -21,7 +21,9 @@ import {
   MenuItem,
   Typography,
 } from '@material-ui/core';
-import { Cancel, MoreVert, SwapHoriz } from '@material-ui/icons';
+import Cancel from '@material-ui/icons/Cancel';
+import MoreVert from '@material-ui/icons/MoreVert';
+import SwapHoriz from '@material-ui/icons/SwapHoriz';
 import { makeStyles } from '@material-ui/core/styles';
 
 const useStyles = makeStyles({