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>

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>