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>

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..." />