diff --git a/src/components/WindowSideBarButtons.js b/src/components/WindowSideBarButtons.js
index 6eb26ea7c4d71227557ad5cdaba866d935a2bd51..7ffc326f1cd10da672a6fb40e7f1e95f64816b39 100644
--- a/src/components/WindowSideBarButtons.js
+++ b/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>
diff --git a/src/components/WindowThumbnailSettings.js b/src/components/WindowThumbnailSettings.js
index 7ed18f974912488231d590ce0556be2094c60c58..ff0a3c41940cecdf354178901b149edb2eb19255 100644
--- a/src/components/WindowThumbnailSettings.js
+++ b/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,
diff --git a/src/components/WindowViewSettings.js b/src/components/WindowViewSettings.js
index f2efa7015d2183c3e2558f3eb80fc67f94fe359b..8b7d99a0d596830cd59da6de3e5e1b8e67bd9767 100644
--- a/src/components/WindowViewSettings.js
+++ b/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,
diff --git a/src/components/ZoomControls.js b/src/components/ZoomControls.js
index 7edb6342060a082d76d6246e2ffbe9cf4300aa7d..bd29e210cf87c5592c8e7c3409ab20c1021b98c0 100644
--- a/src/components/ZoomControls.js
+++ b/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>
diff --git a/src/components/icons/BookViewIcon.js b/src/components/icons/BookViewIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..3d38ba9340d189c14143d14f33282f29cbb7f8af
--- /dev/null
+++ b/src/components/icons/BookViewIcon.js
@@ -0,0 +1,15 @@
+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>
+ );
+}
diff --git a/src/components/icons/CanvasIndexIcon.js b/src/components/icons/CanvasIndexIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..c977716bdf8b851df486c75d57d4ab66c1678054
--- /dev/null
+++ b/src/components/icons/CanvasIndexIcon.js
@@ -0,0 +1,15 @@
+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>
+ );
+}
diff --git a/src/components/icons/RestoreZoomIcon.js b/src/components/icons/RestoreZoomIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..a9c6ba4a37335b396b06674701c426e4494a98c1
--- /dev/null
+++ b/src/components/icons/RestoreZoomIcon.js
@@ -0,0 +1,16 @@
+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>
+ );
+}
diff --git a/src/components/icons/ThumbnailNavigationBottomIcon.js b/src/components/icons/ThumbnailNavigationBottomIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..012b801ec9dd239ac632d8ef78ba03b78a290481
--- /dev/null
+++ b/src/components/icons/ThumbnailNavigationBottomIcon.js
@@ -0,0 +1,16 @@
+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>
+ );
+}
diff --git a/src/components/icons/ThumbnailNavigationRightIcon.js b/src/components/icons/ThumbnailNavigationRightIcon.js
new file mode 100644
index 0000000000000000000000000000000000000000..707ea32364d4835681553144ac87193809a9f9c0
--- /dev/null
+++ b/src/components/icons/ThumbnailNavigationRightIcon.js
@@ -0,0 +1,17 @@
+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>
+ );
+}