Add custom icons.

src/components/WindowSideBarButtons.js

@@ -2,7 +2,8 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import IconButton from '@material-ui/core/IconButton';
 import InfoIcon from '@material-ui/icons/InfoSharp';
-import ListIcon from '@material-ui/icons/FormatAlignJustify';
+import CanvasIndexIcon from './icons/CanvasIndexIcon';
+
 
 /**
  *
@@ -47,7 +48,7 @@ export class WindowSideBarButtons extends Component {
           }
           onClick={() => (toggleWindowSideBarPanel('canvas_navigation'))}
         >
-          <ListIcon
+          <CanvasIndexIcon
             color={this.sideBarPanelCurrentlySelected('canvas_navigation') ? 'primary' : 'inherit'}
           />
         </IconButton>

src/components/WindowThumbnailSettings.js

@@ -4,9 +4,9 @@ import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import Typography from '@material-ui/core/Typography';
 import ThumbnailsOffIcon from '@material-ui/icons/CropDinSharp';
-import VideoLabelIcon from '@material-ui/icons/VideoLabel';
 import PropTypes from 'prop-types';
-
+import ThumbnailNavigationBottomIcon from './icons/ThumbnailNavigationBottomIcon';
+import ThumbnailNavigationRightIcon from './icons/ThumbnailNavigationRightIcon';
 /**
  *
  */
@@ -64,24 +64,6 @@ export class WindowThumbnailSettings extends Component {
   }
 }
 
-/**
- * @private
- */
-function ThumbnailNavigationBottomIcon(props) {
-  return (
-    <VideoLabelIcon />
-  );
-}
-
-/**
- * @private
- */
-function ThumbnailNavigationRightIcon(props) {
-  return (
-    <VideoLabelIcon style={{ transform: 'rotate(-90deg)' }} />
-  );
-}
-
 WindowThumbnailSettings.propTypes = {
   windowId: PropTypes.string.isRequired,
   setWindowThumbnailPosition: PropTypes.func.isRequired,

src/components/WindowViewSettings.js

@@ -4,8 +4,8 @@ import Radio from '@material-ui/core/Radio';
 import RadioGroup from '@material-ui/core/RadioGroup';
 import Typography from '@material-ui/core/Typography';
 import SingleIcon from '@material-ui/icons/CropOriginalSharp';
-import ViewAgendaIcon from '@material-ui/icons/ViewAgenda';
 import PropTypes from 'prop-types';
+import BookViewIcon from './icons/BookViewIcon';
 
 /**
  *
@@ -48,7 +48,7 @@ export class WindowViewSettings extends Component {
           />
           <FormControlLabel
             value="book"
-            control={<Radio color="primary" icon={<ViewAgendaIconRotated />} checkedIcon={<ViewAgendaIconRotated />} />}
+            control={<Radio color="primary" icon={<BookViewIcon />} checkedIcon={<BookViewIcon />} />}
             label={t('book')}
             labelPlacement="bottom"
           />
@@ -58,15 +58,6 @@ export class WindowViewSettings extends Component {
   }
 }
 
-/**
- * @private
- */
-function ViewAgendaIconRotated(props) {
-  return (
-    <ViewAgendaIcon style={{ transform: 'rotate(-90deg)' }} />
-  );
-}
-
 WindowViewSettings.propTypes = {
   windowId: PropTypes.string.isRequired,
   setWindowViewType: PropTypes.func.isRequired,

src/components/ZoomControls.js

@@ -4,9 +4,8 @@ import List from '@material-ui/core/List';
 import ListItem from '@material-ui/core/ListItem';
 import AddCircleIcon from '@material-ui/icons/AddCircleOutlineSharp';
 import RemoveCircleIcon from '@material-ui/icons/RemoveCircleOutlineSharp';
-import RefreshIcon from '@material-ui/icons/Refresh';
 import PropTypes from 'prop-types';
-
+import RestoreZoomIcon from './icons/RestoreZoomIcon';
 /**
  */
 export class ZoomControls extends Component {
@@ -87,7 +86,7 @@ export class ZoomControls extends Component {
         </ListItem>
         <ListItem>
           <IconButton aria-label={t('zoomReset')} onClick={this.handleZoomResetClick}>
-            <RefreshIcon />
+            <RestoreZoomIcon />
           </IconButton>
         </ListItem>
       </List>

src/components/icons/BookViewIcon.js

+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * BookViewIcon ~
+*/
+export default function BookViewIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M1,4V21H22.853V4.1ZM3,19V6h8V19Zm18,0H13V6h8ZM14,9.5h6V11H14ZM14,12h6v1.5H14Zm0,2.5h6V16H14Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

src/components/icons/CanvasIndexIcon.js

+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * Render the canvas index svg
+ */
+export default function CanvasIndexIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M6.924,21H21V19H6.924ZM3,17H21V15H3Zm3.924-4H21V11H6.924Zm0-4H21V7H6.924ZM3,3V5H21V3Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

src/components/icons/RestoreZoomIcon.js

+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * RestoreZoomIcon ~
+*/
+export default function RestoreZoomIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M6,15H9v3h2V13H6Zm9-6V6H13v5h5V9Z" />
+        <path d="M12,2A10,10,0,1,0,22,12,10,10,0,0,0,12,2Zm0,18a8,8,0,1,1,8-8,8,8,0,0,1-8,8Z" />
+      </svg>
+    </SvgIcon>
+  );
+}

src/components/icons/ThumbnailNavigationBottomIcon.js

+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * ThumbnailNavigationBottomIcon ~
+*/
+export default function ThumbnailNavigationBottomIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M3,3H21V5H3Z" transform="translate(0 16)" />
+        <path d="M21,5H3V19H21ZM19,17H5V7H19Z" transform="translate(0 -2)" />
+      </svg>
+    </SvgIcon>
+  );
+}

src/components/icons/ThumbnailNavigationRightIcon.js

+import React from 'react';
+import SvgIcon from '@material-ui/core/SvgIcon';
+
+/**
+ * ThumbnailNavigationRightIcon ~
+*/
+export default function ThumbnailNavigationRightIcon(props) {
+  return (
+    <SvgIcon {...props}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
+        <path d="M0,0H24V24H0Z" transform="translate(24) rotate(90)" fill="none" />
+        <path d="M3,3H21V5H3Z" transform="translate(24) rotate(90)" />
+        <path d="M19,3H5V21H19ZM17,19H7V5H17Z" transform="translate(-2)" />
+      </svg>
+    </SvgIcon>
+  );
+}