add icons to APP_ROUTES #10

packages/frontend/src/components/general/navigation/RouteDrawer.tsx

@@ -40,6 +40,7 @@ export const RouteDrawer = (props: RouteDrawerProps) => {
         <List>
           {APP_ROUTES.map(route => (
             <ListItem button={true} key={getLinkForPage(route)}>
+              {route.icon && <ListItemIcon>{route.icon}</ListItemIcon>}
               <Link to={getLinkForPage(route)}>
                 <ListItemText primary={getLinkDisplayNameForPage(route)} />
               </Link>

packages/frontend/src/util/approutes.tsx

@@ -1,6 +1,7 @@
-import * as H from 'history';
+import HomeIcon from '@material-ui/icons/Home';
+import LinkIcon from '@material-ui/icons/Link';
 import * as React from 'react';
-import { RouteProps, Redirect } from 'react-router';
+import { RouteProps } from 'react-router';
 import { HomePage } from '../components/pages/HomePage';
 import { LinkPage } from '../components/pages/LinkPage';
 
@@ -15,6 +16,9 @@ export interface AppRouteProps extends RouteProps {
   // link text (Human readable!)
   readonly linkDisplayName?: string;
 
+  // optional icon displayed next to the link name
+  readonly icon?: JSX.Element;
+
   // AppRoutes must have a path - deoptionalize this property
   readonly path: string;
 }
@@ -55,13 +59,15 @@ export function getLinkDisplayNameForPath(path: string): string {
 export const HOME_PAGE: AppRouteProps = {
   path: '/home',
   linkDisplayName: 'Home',
+  icon: <HomeIcon />,
   render: props => <HomePage {...props} />,
 };
 
 // Page with searchable, useful links for elite-se-degree program
 export const LINK_PAGE: AppRouteProps = {
   path: '/links',
   linkDisplayName: 'Useful Links',
+  icon: <LinkIcon />,
   render: props => <LinkPage {...props} />,
 };