feat: add MUI icons support in App component

app/frontend/package-lock.json

@@ -1,15 +1,17 @@
 {
   "name": "azure-image-chooser-frontend",
-  "version": "0.1.0",
+  "version": "1.0.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "azure-image-chooser-frontend",
-      "version": "0.1.0",
+      "version": "1.0.0",
+      "license": "MIT",
       "dependencies": {
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
+        "@mui/icons-material": "^9.0.0",
         "@mui/material": "^9.0.0",
         "@tanstack/react-query": "^5.99.2",
         "react": "^19.2.5",
@@ -1040,6 +1042,32 @@
         "url": "https://opencollective.com/mui-org"
       }
     },
+    "node_modules/@mui/icons-material": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-9.0.0.tgz",
+      "integrity": "sha512-oDwyvI6LgjWRC9MBcSGvLkPud9S9ELgSBQFYxa1rYcZn6Br55dn22SyvsPDMsn0G8OndFk53iMT45W5mNqrogw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.29.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^9.0.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@mui/material": {
       "version": "9.0.0",
       "resolved": "https://registry.npmjs.org/@mui/material/-/material-9.0.0.tgz",

app/frontend/package.json

@@ -14,6 +14,7 @@
   "dependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^9.0.0",
     "@mui/material": "^9.0.0",
     "@tanstack/react-query": "^5.99.2",
     "react": "^19.2.5",

app/frontend/src/App.tsx

@@ -1,10 +1,12 @@
 import { useMemo, useState } from "react";
 import type { MouseEvent } from "react";
+import MenuIcon from "@mui/icons-material/Menu";
 import {
   AppBar,
   Box,
   Button,
   Drawer,
+  IconButton,
   List,
   ListItem,
   ListItemButton,
@@ -50,16 +52,17 @@ const App = () => {
         sx={{ borderBottom: 1, borderColor: "divider", display: { xs: "block", md: "none" } }}
       >
         <Toolbar sx={{ gap: 1 }}>
-          <Button
+          <IconButton
-            variant="text"
             color="inherit"
             onClick={openToolsMenu}
+            aria-label="Open tools menu"
             aria-controls={toolsMenuOpen ? "tools-menu" : undefined}
             aria-haspopup="true"
             aria-expanded={toolsMenuOpen ? "true" : undefined}
+            edge="start"
           >
-            Tools
+            <MenuIcon />
-          </Button>
+          </IconButton>
 
           <Typography sx={{ flexGrow: 1, fontWeight: 500 }} noWrap>
             {activeTool?.name ?? "Tool"}