Remove @mdi/js as a dependency

matrixgw_frontend/package-lock.json

@@ -11,8 +11,6 @@
         "@emotion/react": "^11.14.0",
         "@emotion/styled": "^11.14.1",
         "@fontsource/roboto": "^5.2.9",
-        "@mdi/js": "^7.4.47",
-        "@mdi/react": "^1.6.1",
         "@mui/icons-material": "^7.3.6",
         "@mui/material": "^7.3.6",
         "@mui/x-data-grid": "^8.20.0",
@@ -777,21 +775,6 @@
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
-    "node_modules/@mdi/js": {
-      "version": "7.4.47",
-      "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
-      "integrity": "sha512-KPnNOtm5i2pMabqZxpUz7iQf+mfrYZyKCZ8QNz85czgEt7cuHcGorWfdzUMWYA0SD+a6Hn4FmJ+YhzzzjkTZrQ==",
-      "license": "Apache-2.0"
-    },
-    "node_modules/@mdi/react": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/@mdi/react/-/react-1.6.1.tgz",
-      "integrity": "sha512-4qZeDcluDFGFTWkHs86VOlHkm6gnKaMql13/gpIcUQ8kzxHgpj31NuCkD8abECVfbULJ3shc7Yt4HJ6Wu6SN4w==",
-      "license": "MIT",
-      "dependencies": {
-        "prop-types": "^15.7.2"
-      }
-    },
     "node_modules/@mui/core-downloads-tracker": {
       "version": "7.3.6",
       "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.6.tgz",

matrixgw_frontend/package.json

@@ -13,8 +13,6 @@
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
     "@fontsource/roboto": "^5.2.9",
-    "@mdi/js": "^7.4.47",
-    "@mdi/react": "^1.6.1",
     "@mui/icons-material": "^7.3.6",
     "@mui/material": "^7.3.6",
     "@mui/x-data-grid": "^8.20.0",

matrixgw_frontend/src/icons/AppIcon.tsx

@@ -0,0 +1,18 @@
+import { Icon } from "@mui/material";
+import { useActualColorMode } from "../widgets/dashboard/ThemeSwitcher";
+
+export function AppIcon(p: { src: string; size?: string }): React.ReactElement {
+  const { mode } = useActualColorMode();
+  return (
+    <Icon style={{ display: "inline-flex", width: p.size, height: p.size }}>
+      <img
+        style={{
+          height: "100%",
+          flex: 1,
+          backgroundColor: mode === "dark" ? "white" : "black",
+          mask: `url("${p.src}")`,
+        }}
+      />
+    </Icon>
+  );
+}

matrixgw_frontend/src/icons/message-text-fast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M9 5C7.9 5 7 5.9 7 7V21L11 17H20C21.1 17 22 16.1 22 15V7C22 5.9 21.1 5 20 5H9M3 7C2.4 7 2 7.4 2 8S2.4 9 3 9H5V7H3M11 8H19V10H11V8M2 11C1.4 11 1 11.4 1 12S1.4 13 2 13H5V11H2M11 12H16V14H11V12M1 15C.4 15 0 15.4 0 16C0 16.6 .4 17 1 17H5V15H1Z" /></svg>

matrixgw_frontend/src/icons/openid.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M14,2L11,3.5V19.94C7,19.5 4,17.46 4,15C4,12.75 6.5,10.85 10,10.22V8.19C4.86,8.88 1,11.66 1,15C1,18.56 5.36,21.5 11,21.94C11.03,21.94 11.06,21.94 11.09,21.94L14,20.5V2M15,8.19V10.22C16.15,10.43 17.18,10.77 18.06,11.22L16.5,12L23,13.5L22.5,9L20.5,10C19,9.12 17.12,8.47 15,8.19Z" /></svg>

matrixgw_frontend/src/routes/auth/LoginRoute.tsx

@@ -1,9 +1,10 @@
-import { Alert, Box, Button, CircularProgress } from "@mui/material";
-import Icon from "@mdi/react";
-import { mdiOpenid } from "@mdi/js";
+import { Alert, Box, Button, CircularProgress, SvgIcon } from "@mui/material";
 import { ServerApi } from "../../api/ServerApi";
 import React from "react";
 import { AuthApi } from "../../api/AuthApi";
+import openid from "../../icons/openid.svg";
+import { createSvgIcon } from "@mui/x-data-grid/internals";
+import { AppIcon } from "../../icons/AppIcon";
 
 export function LoginRoute(): React.ReactElement {
   const [loading, setLoading] = React.useState(false);
@@ -40,7 +41,7 @@ export function LoginRoute(): React.ReactElement {
           fullWidth
           variant="outlined"
           onClick={authWithOpenID}
-          startIcon={<Icon path={mdiOpenid} size={1} />}
+          startIcon={<AppIcon src={openid} />}
         >
           Sign in with {ServerApi.Config.oidc_provider_name}
         </Button>

matrixgw_frontend/src/widgets/auth/BaseLoginPage.tsx

@@ -1,10 +1,10 @@
-import { mdiMessageTextFast } from "@mdi/js";
-import Icon from "@mdi/react";
 import { Typography } from "@mui/material";
 import MuiCard from "@mui/material/Card";
 import Stack from "@mui/material/Stack";
 import { styled } from "@mui/material/styles";
 import { Outlet } from "react-router";
+import { AppIcon } from "../../icons/AppIcon";
+import mdiMessageTextFast from "../../icons/message-text-fast.svg";
 
 const Card = styled(MuiCard)(({ theme }) => ({
   display: "flex",
@@ -57,12 +57,7 @@ export function BaseLoginPage(): React.ReactElement {
           variant="h4"
           sx={{ width: "100%", fontSize: "clamp(2rem, 10vw, 2.15rem)" }}
         >
-          <Icon
-            path={mdiMessageTextFast}
-            size={"1em"}
-            style={{ display: "inline-table" }}
-          />{" "}
-          MatrixGW
+          <AppIcon src={mdiMessageTextFast} size={"2em"} /> MatrixGW
         </Typography>
         <Outlet />
       </Card>

matrixgw_frontend/src/widgets/dashboard/DashboardHeader.tsx

@@ -1,5 +1,3 @@
-import { mdiMessageTextFast } from "@mdi/js";
-import Icon from "@mdi/react";
 import LogoutIcon from "@mui/icons-material/Logout";
 import MenuIcon from "@mui/icons-material/Menu";
 import MenuOpenIcon from "@mui/icons-material/MenuOpen";
@@ -13,6 +11,8 @@ import Toolbar from "@mui/material/Toolbar";
 import Tooltip from "@mui/material/Tooltip";
 import Typography from "@mui/material/Typography";
 import * as React from "react";
+import { AppIcon } from "../../icons/AppIcon";
+import mdiMessageTextFast from "../../icons/message-text-fast.svg";
 import { RouterLink } from "../RouterLink";
 import { useUserInfo } from "./BaseAuthenticatedPage";
 import ThemeSwitcher from "./ThemeSwitcher";
@@ -101,7 +101,7 @@ export default function DashboardHeader({
             <RouterLink to="/">
               <Stack direction="row" alignItems="center">
                 <LogoContainer>
-                  <Icon path={mdiMessageTextFast} size="2em" />
+                  <AppIcon src={mdiMessageTextFast} size="2em" />
                 </LogoContainer>
                 <Typography
                   variant="h6"

matrixgw_frontend/src/widgets/dashboard/DashboardSidebar.tsx

@@ -1,5 +1,7 @@
-import { mdiBug, mdiForum, mdiKeyVariant, mdiLinkLock } from "@mdi/js";
-import Icon from "@mdi/react";
+import BugReportIcon from "@mui/icons-material/BugReport";
+import ForumIcon from "@mui/icons-material/Forum";
+import KeyIcon from "@mui/icons-material/Key";
+import LinkIcon from "@mui/icons-material/Link";
 import Box from "@mui/material/Box";
 import Drawer from "@mui/material/Drawer";
 import List from "@mui/material/List";
@@ -98,27 +100,27 @@ export default function DashboardSidebar({
             <DashboardSidebarPageItem
               disabled={!user.info.matrix_account_connected}
               title="Messages"
-              icon={<Icon path={mdiForum} size={"1.5em"} />}
+              icon={<ForumIcon style={{ height: "1em", width: "1em" }} />}
               href="/"
               mini={viewport === "desktop"}
             />
             <DashboardSidebarDividerItem />
             <DashboardSidebarPageItem
               title="Matrix link"
-              icon={<Icon path={mdiLinkLock} size={"1.5em"} />}
+              icon={<LinkIcon style={{ height: "1em", width: "1em" }} />}
               href="/matrix_link"
               mini={viewport === "desktop"}
             />
             <DashboardSidebarPageItem
               title="API tokens"
-              icon={<Icon path={mdiKeyVariant} size={"1.5em"} />}
+              icon={<KeyIcon style={{ height: "1em", width: "1em" }} />}
               href="/tokens"
               mini={viewport === "desktop"}
             />
             <DashboardSidebarPageItem
               disabled={!user.info.matrix_account_connected}
               title="WS Debug"
-              icon={<Icon path={mdiBug} size={"1.5em"} />}
+              icon={<BugReportIcon style={{ height: "1em", width: "1em" }} />}
               href="/wsdebug"
               mini={viewport === "desktop"}
             />

matrixgw_frontend/src/widgets/dashboard/ThemeSwitcher.tsx

@@ -7,9 +7,10 @@ import DarkModeIcon from "@mui/icons-material/DarkMode";
 import LightModeIcon from "@mui/icons-material/LightMode";
 import type {} from "@mui/material/themeCssVarsAugmentation";
 
-export default function ThemeSwitcher() {
-  const theme = useTheme();
-
+export function useActualColorMode(): {
+  mode: "light" | "dark";
+  setMode: (mode: "light" | "dark") => void;
+} {
   const prefersDarkMode = useMediaQuery("(prefers-color-scheme: dark)");
   const preferredMode = prefersDarkMode ? "dark" : "light";
 
@@ -17,21 +18,27 @@ export default function ThemeSwitcher() {
 
   const paletteMode = !mode || mode === "system" ? preferredMode : mode;
 
+  return { mode: paletteMode, setMode };
+}
+
+export default function ThemeSwitcher() {
+  const theme = useTheme();
+
+  const { mode, setMode } = useActualColorMode();
+
   const toggleMode = React.useCallback(() => {
-    setMode(paletteMode === "dark" ? "light" : "dark");
-  }, [setMode, paletteMode]);
+    setMode(mode === "dark" ? "light" : "dark");
+  }, [mode, setMode]);
 
   return (
     <Tooltip
-      title={`${paletteMode === "dark" ? "Light" : "Dark"} mode`}
+      title={`${mode === "dark" ? "Light" : "Dark"} mode`}
       enterDelay={1000}
     >
       <div>
         <IconButton
           size="small"
-          aria-label={`Switch to ${
-            paletteMode === "dark" ? "light" : "dark"
-          } mode`}
+          aria-label={`Switch to ${mode === "dark" ? "light" : "dark"} mode`}
           onClick={toggleMode}
         >
           <LightModeIcon