Updated customise theme docs

The custom theme document talks about System Icons, then immediatly ignores the existance of these  in the `Sidebar Sub-menu` example a couple of paragraphs later.
This commit updates the docs to make use of these icons, as well as adding an icon for resource types to the default icons.

Also updated the sidebar in example app to use this same approach

Signed-off-by: Alex Crome <afscrome@users.noreply.github.com>

.changeset/dry-boats-sniff.md

@@ -0,0 +1,10 @@
+---
+'@backstage/app-defaults': patch
+---
+
+Added a System Icon for resource entities.
+This can be obtained using:
+
+```ts
+useApp().getSystemIcon('kind:resource');
+```

docs/getting-started/app-custom-theme.md

@@ -403,12 +403,7 @@ For this example we'll show you how you can expand the sidebar with a sub-menu:
 2. Then we want to add the following imports for the icons:
 
    ```tsx title="packages/app/src/components/Root/Root.tsx"
-   import ApiIcon from '@material-ui/icons/Extension';
-   import ComponentIcon from '@material-ui/icons/Memory';
-   import DomainIcon from '@material-ui/icons/Apartment';
-   import ResourceIcon from '@material-ui/icons/Work';
-   import SystemIcon from '@material-ui/icons/Category';
-   import UserIcon from '@material-ui/icons/Person';
+   import { useApp } from '@backstage/core-plugin-api';
    ```
 
 3. Then update the `@backstage/core-components` import like this:
@@ -441,39 +436,39 @@ For this example we'll show you how you can expand the sidebar with a sub-menu:
        <SidebarSubmenuItem
          title="Domains"
          to="catalog?filters[kind]=domain"
-         icon={DomainIcon}
+         icon={useApp().getSystemIcon('kind:domain')}
        />
        <SidebarSubmenuItem
          title="Systems"
          to="catalog?filters[kind]=system"
-         icon={SystemIcon}
+         icon={useApp().getSystemIcon('kind:system')}
        />
        <SidebarSubmenuItem
          title="Components"
          to="catalog?filters[kind]=component"
-         icon={ComponentIcon}
+         icon={useApp().getSystemIcon('kind:component')}
        />
        <SidebarSubmenuItem
          title="APIs"
          to="catalog?filters[kind]=api"
-         icon={ApiIcon}
+         icon={useApp().getSystemIcon('kind:api')}
        />
        <SidebarDivider />
        <SidebarSubmenuItem
          title="Resources"
          to="catalog?filters[kind]=resource"
-         icon={ResourceIcon}
+         icon={useApp().getSystemIcon('kind:resource')}
        />
        <SidebarDivider />
        <SidebarSubmenuItem
          title="Groups"
          to="catalog?filters[kind]=group"
-         icon={GroupIcon}
+         icon={useApp().getSystemIcon('kind:group')}
        />
        <SidebarSubmenuItem
          title="Users"
          to="catalog?filters[kind]=user"
-         icon={UserIcon}
+         icon={useApp().getSystemIcon('kind:user')}
        />
      </SidebarSubmenu>
    </SidebarItem>

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

@@ -34,6 +34,7 @@ import MuiMenuBookIcon from '@material-ui/icons/MenuBook';
 import MuiPeopleIcon from '@material-ui/icons/People';
 import MuiPersonIcon from '@material-ui/icons/Person';
 import MuiWarningIcon from '@material-ui/icons/Warning';
+import MuiWorkIcon from '@material-ui/icons/Work';
 
 export const icons = {
   brokenImage: MuiBrokenImageIcon as IconComponent,
@@ -56,6 +57,7 @@ export const icons = {
   'kind:location': MuiLocationOnIcon as IconComponent,
   'kind:system': MuiCategoryIcon as IconComponent,
   'kind:user': MuiPersonIcon as IconComponent,
+  'kind:resource': MuiWorkIcon as IconComponent,
   user: MuiPersonIcon as IconComponent,
   warning: MuiWarningIcon as IconComponent,
 };

packages/app/src/components/Root/Root.tsx

@@ -17,11 +17,9 @@
 import React, { PropsWithChildren } from 'react';
 import { makeStyles } from '@material-ui/core';
 import HomeIcon from '@material-ui/icons/Home';
-import ExtensionIcon from '@material-ui/icons/Extension';
 import RuleIcon from '@material-ui/icons/AssignmentTurnedIn';
 import MapIcon from '@material-ui/icons/MyLocation';
 import LayersIcon from '@material-ui/icons/Layers';
-import LibraryBooks from '@material-ui/icons/LibraryBooks';
 import PlaylistPlayIcon from '@material-ui/icons/PlaylistPlay';
 import CreateComponentIcon from '@material-ui/icons/AddCircleOutline';
 import SearchIcon from '@material-ui/icons/Search';
@@ -51,16 +49,9 @@ import {
   SidebarSubmenuItem,
 } from '@backstage/core-components';
 import { MyGroupsSidebarItem } from '@backstage/plugin-org';
-import GroupIcon from '@material-ui/icons/People';
 import { SearchModal } from '../search/SearchModal';
 import Score from '@material-ui/icons/Score';
-
-import ApiIcon from '@material-ui/icons/Extension';
-import ComponentIcon from '@material-ui/icons/Memory';
-import DomainIcon from '@material-ui/icons/Apartment';
-import ResourceIcon from '@material-ui/icons/Work';
-import SystemIcon from '@material-ui/icons/Category';
-import UserIcon from '@material-ui/icons/Person';
+import { useApp } from '@backstage/core-plugin-api';
 
 const useSidebarLogoStyles = makeStyles({
   root: {
@@ -107,49 +98,57 @@ export const Root = ({ children }: PropsWithChildren<{}>) => (
             <SidebarSubmenuItem
               title="Domains"
               to="catalog?filters[kind]=domain"
-              icon={DomainIcon}
+              icon={useApp().getSystemIcon('kind:domain')}
             />
             <SidebarSubmenuItem
               title="Systems"
               to="catalog?filters[kind]=system"
-              icon={SystemIcon}
+              icon={useApp().getSystemIcon('kind:system')}
             />
             <SidebarSubmenuItem
               title="Components"
               to="catalog?filters[kind]=component"
-              icon={ComponentIcon}
+              icon={useApp().getSystemIcon('kind:component')}
             />
             <SidebarSubmenuItem
               title="APIs"
               to="catalog?filters[kind]=api"
-              icon={ApiIcon}
+              icon={useApp().getSystemIcon('kind:api')}
             />
             <SidebarDivider />
             <SidebarSubmenuItem
               title="Resources"
               to="catalog?filters[kind]=resource"
-              icon={ResourceIcon}
+              icon={useApp().getSystemIcon('kind:resource')}
             />
             <SidebarDivider />
             <SidebarSubmenuItem
               title="Groups"
               to="catalog?filters[kind]=group"
-              icon={GroupIcon}
+              icon={useApp().getSystemIcon('kind:group')}
             />
             <SidebarSubmenuItem
               title="Users"
               to="catalog?filters[kind]=user"
-              icon={UserIcon}
+              icon={useApp().getSystemIcon('kind:user')}
             />
           </SidebarSubmenu>
         </SidebarItem>
         <MyGroupsSidebarItem
           singularTitle="My Squad"
           pluralTitle="My Squads"
-          icon={GroupIcon}
+          icon={useApp().getSystemIcon('group')!}
+        />
+        <SidebarItem
+          icon={useApp().getSystemIcon('kind:api')!}
+          to="api-docs"
+          text="APIs"
+        />
+        <SidebarItem
+          icon={useApp().getSystemIcon('docs')!}
+          to="docs"
+          text="Docs"
         />
-        <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />
-        <SidebarItem icon={LibraryBooks} to="docs" text="Docs" />
         <SidebarItem icon={PlaylistPlayIcon} to="playlist" text="Playlists" />
         <SidebarItem icon={LayersIcon} to="explore" text="Explore" />
         <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." />