components,app-api: sync iconts with master + fix circular dependency

Signed-off-by: Patrik Oldsberg <poldsberg@gmail.com>

packages/app-api/src/app/icons.tsx

@@ -14,23 +14,25 @@
  * limitations under the License.
  */
 
-import {
-  BrokenImageIcon,
-  ChatIcon,
-  DashboardIcon,
-  EmailIcon,
-  GitHubIcon,
-  GroupIcon,
-  HelpIcon,
-  UserIcon,
-  WarningIcon,
-} from '@backstage/components';
 import { IconComponent } from '@backstage/plugin-api';
+import MuiMenuBookIcon from '@material-ui/icons/MenuBook';
+import MuiBrokenImageIcon from '@material-ui/icons/BrokenImage';
+import MuiChatIcon from '@material-ui/icons/Chat';
+import MuiDashboardIcon from '@material-ui/icons/Dashboard';
+import MuiEmailIcon from '@material-ui/icons/Email';
+import MuiGitHubIcon from '@material-ui/icons/GitHub';
+import MuiHelpIcon from '@material-ui/icons/Help';
+import MuiPeopleIcon from '@material-ui/icons/People';
+import MuiPersonIcon from '@material-ui/icons/Person';
+import MuiWarningIcon from '@material-ui/icons/Warning';
+import MuiDocsIcon from '@material-ui/icons/Description';
 
 type AppIconsKey =
   | 'brokenImage'
+  | 'catalog'
   | 'chat'
   | 'dashboard'
+  | 'docs'
   | 'email'
   | 'github'
   | 'group'
@@ -41,13 +43,16 @@ type AppIconsKey =
 export type AppIcons = { [key in AppIconsKey]: IconComponent };
 
 export const defaultAppIcons: AppIcons = {
-  brokenImage: BrokenImageIcon,
-  chat: ChatIcon,
-  dashboard: DashboardIcon,
-  email: EmailIcon,
-  github: GitHubIcon,
-  group: GroupIcon,
-  help: HelpIcon,
-  user: UserIcon,
-  warning: WarningIcon,
+  brokenImage: MuiBrokenImageIcon,
+  // To be confirmed: see https://github.com/backstage/backstage/issues/4970
+  catalog: MuiMenuBookIcon,
+  chat: MuiChatIcon,
+  dashboard: MuiDashboardIcon,
+  docs: MuiDocsIcon,
+  email: MuiEmailIcon,
+  github: MuiGitHubIcon,
+  group: MuiPeopleIcon,
+  help: MuiHelpIcon,
+  user: MuiPersonIcon,
+  warning: MuiWarningIcon,
 };

packages/components/src/icons/icons.tsx

@@ -29,8 +29,10 @@ const overridableSystemIcon = (key: string): IconComponent => {
 
 // Should match the list of overridable system icon keys in @backstage/app-api
 export const BrokenImageIcon = overridableSystemIcon('brokenImage');
+export const CatalogIcon = overridableSystemIcon('catalog');
 export const ChatIcon = overridableSystemIcon('chat');
 export const DashboardIcon = overridableSystemIcon('dashboard');
+export const DocsIcon = overridableSystemIcon('docs');
 export const EmailIcon = overridableSystemIcon('email');
 export const GitHubIcon = overridableSystemIcon('github');
 export const GroupIcon = overridableSystemIcon('group');