Make icons appear to the left of the labels

1 files changed, 15 insertions, 2 deletions

diff --git a/src/components/Header/Header.js b/src/components/Header/Header.js
index 0600e7f..d6294db 100644
--- a/src/components/Header/Header.js
+++ b/src/components/Header/Header.js
@@ -18,8 +18,18 @@ import GitHubIcon from '@material-ui/icons/GitHub';
 const useStyles = makeStyles(theme => ({
   logo: {
     color: theme.palette.secondary.main,
-    margin: theme.spacing(0, 2, 0, 3)
+    margin: theme.spacing(0, 3, 0, 3),
   },
+  tab: {
+    '& .MuiTab-wrapper': {
+      padding: theme.spacing(2),
+      flexDirection: 'row',
+      '& svg': {
+        marginRight: theme.spacing(1),
+        marginBottom: '0 !important',
+      }
+    }
+  }
 }));
 
 
@@ -40,13 +50,16 @@ const Header = ({ page, setPage }) => {
   return (
   <AppBar position="sticky">
     <Toolbar>
-      <Typography variant="h4" className={classes.logo}> ChronoCube </Typography>
+      <Typography variant="h4" className={classes.logo}>
+        ChronoCube
+      </Typography>
       <Tabs onChange={handleChange} value={page}>
         { Object.keys(icons).map(item => (
           <Tab
             label={item}
             icon={icons[item]}
             value={item}
+            className={classes.tab}
             key={item}
           />
         ))}