From 804aaa8007da25426a090fdbddd0515891f6aa10 Mon Sep 17 00:00:00 2001
From: Magnus Jacobsson <Magnus.Jacobsson@berotec.se>
Date: Sat, 9 Dec 2023 09:08:03 +0100
Subject: [PATCH] add workaround for @mui/icons-material not published in ESM
 module format

See
https://github.com/mui/material-ui/issues/30671#issuecomment-1819254734.
---
 src/ButtonAppBar.js | 48 ++++++++++++++++++++++-----------------------
 1 file changed, 24 insertions(+), 24 deletions(-)

diff --git a/src/ButtonAppBar.js b/src/ButtonAppBar.js
index 21221baf..49a920e0 100644
--- a/src/ButtonAppBar.js
+++ b/src/ButtonAppBar.js
@@ -6,17 +6,17 @@ import Toolbar from '@mui/material/Toolbar/index.js';
 import Typography from '@mui/material/Typography/index.js';
 import Button from '@mui/material/Button/index.js';
 import IconButton from '@mui/material/IconButton/index.js';
-import MenuIcon from '@mui/icons-material/Menu.js';
-import AddIcon from '@mui/icons-material/Add.js';
-import OpenInBrowserIcon from '@mui/icons-material/OpenInBrowser.js';
-import SaveAltIcon from '@mui/icons-material/SaveAlt.js';
-import UndoIcon from '@mui/icons-material/Undo.js';
-import RedoIcon from '@mui/icons-material/Redo.js';
-import ZoomInIcon from '@mui/icons-material/ZoomIn.js';
-import ZoomOutIcon from '@mui/icons-material/ZoomOut.js';
-import ZoomOutMapIcon from '@mui/icons-material/ZoomOutMap.js';
-import SettingsIcon from '@mui/icons-material/Settings.js';
-import HelpIcon from '@mui/icons-material/Help.js';
+import { Menu as MenuIcon } from '@mui/icons-material';
+import { Add as AddIcon } from '@mui/icons-material';
+import { OpenInBrowser as OpenInBrowserIcon } from '@mui/icons-material';
+import { SaveAlt as SaveAltIcon } from '@mui/icons-material';
+import { Undo as UndoIcon } from '@mui/icons-material';
+import { Redo as RedoIcon } from '@mui/icons-material';
+import { ZoomIn as ZoomInIcon } from '@mui/icons-material';
+import { ZoomOut as ZoomOutIcon }  from '@mui/icons-material';
+import { ZoomOutMap as ZoomOutMapIcon } from '@mui/icons-material';
+import { Settings as SettingsIcon } from '@mui/icons-material';
+import { Help as HelpIcon } from '@mui/icons-material';
 import GitHubIcon from './GitHubIcon.js'
 
 const styles = {
@@ -114,7 +114,7 @@ function ButtonAppBar(props) {
             aria-label="Menu"
             onClick={handleMenuButtonClick}
             size="large">
-            {/* <MenuIcon /> */}
+            <MenuIcon />
           </IconButton>
           <IconButton
             id="new"
@@ -123,7 +123,7 @@ function ButtonAppBar(props) {
             aria-label="New"
             onClick={handleNewButtonClick}
             size="large">
-            {/* <AddIcon /> */}
+            <AddIcon />
           </IconButton>
           <IconButton
             id="open"
@@ -132,7 +132,7 @@ function ButtonAppBar(props) {
             aria-label="OpenInBrowser"
             onClick={handleOpenInBrowserButtonClick}
             size="large">
-            {/* <OpenInBrowserIcon /> */}
+            <OpenInBrowserIcon />
           </IconButton>
           <IconButton
             id="save-as"
@@ -141,7 +141,7 @@ function ButtonAppBar(props) {
             aria-label="SaveAlt"
             onClick={handleSaveAltButtonClick}
             size="large">
-            {/* <SaveAltIcon /> */}
+            <SaveAltIcon />
           </IconButton>
           <IconButton
             id="undo"
@@ -151,7 +151,7 @@ function ButtonAppBar(props) {
             aria-label="Undo"
             onClick={handleUndoButtonClick}
             size="large">
-            {/* <UndoIcon /> */}
+            <UndoIcon />
           </IconButton>
           <IconButton
             id="redo"
@@ -161,7 +161,7 @@ function ButtonAppBar(props) {
             aria-label="Redo"
             onClick={handleRedoButtonClick}
             size="large">
-            {/* <RedoIcon /> */}
+            <RedoIcon />
           </IconButton>
           <Typography
             variant="h6"
@@ -177,7 +177,7 @@ function ButtonAppBar(props) {
             aria-label="ZoomIn"
             onClick={handleZoomInButtonClick}
             size="large">
-            {/* <ZoomInIcon /> */}
+            <ZoomInIcon />
           </IconButton>
           <IconButton
             id="zoom-out"
@@ -186,7 +186,7 @@ function ButtonAppBar(props) {
             aria-label="ZoomOut"
             onClick={handleZoomOutButtonClick}
             size="large">
-            {/* <ZoomOutIcon /> */}
+            <ZoomOutIcon />
           </IconButton>
           <IconButton
             id="zoom-out-map"
@@ -195,7 +195,7 @@ function ButtonAppBar(props) {
             aria-label="ZoomOutMap"
             onClick={handleZoomOutMapButtonClick}
             size="large">
-            {/* <ZoomOutMapIcon /> */}
+            <ZoomOutMapIcon />
           </IconButton>
           <Button
             id="zoom-reset"
@@ -228,7 +228,7 @@ function ButtonAppBar(props) {
             aria-label="Settings"
             onClick={handleSettingsButtonClick}
             size="large">
-            {/* <SettingsIcon /> */}
+            <SettingsIcon />
           </IconButton>
           <a
             id="github"
@@ -238,9 +238,9 @@ function ButtonAppBar(props) {
             rel="noreferrer noopener"
           >
             <IconButton color="inherit" aria-label="GitHub" size="large">
-              {/* <GitHubIcon
+              <GitHubIcon
                 viewBox='-2.4 -2.4 28.8 28.8'
-              /> */}
+              />
             </IconButton>
           </a>
           <IconButton
@@ -249,7 +249,7 @@ function ButtonAppBar(props) {
             aria-label="Help"
             onClick={handleHelpButtonClick}
             size="large">
-            {/* <HelpIcon /> */}
+            <HelpIcon />
           </IconButton>
         </Toolbar>
       </AppBar>