fixed ImgIcon not quite centering things properly

src/common/ImgIcon.tsx

@@ -1,17 +1,21 @@
 import { Icon } from "@mui/material";
 import { makeStyles } from "@mui/styles";
-// import Image from "material-ui-image";
-import { Img as Image } from 'react-image';
+import { Img as Image } from "react-image";
 
 const useStyles = makeStyles(() => ({
   icon: {
-    textAlign: "center",
+    display: "flex",           // Ensure flexbox for centering
+    justifyContent: "center",  // Center horizontally
+    alignItems: "center",      // Center vertically
     margin: "1px",
+    overflow: "hidden",        // Prevent image overflow
   },
   img: {
-    height: "100%",
-    width: "auto !important"
-  }
+    maxHeight: "100%",         // Fit within container height
+    maxWidth: "100%",          // Fit within container width
+    width: "auto",             // Maintain aspect ratio
+    height: "auto",            // Maintain aspect ratio
+  },
 }));
 
 interface Props {
@@ -29,7 +33,10 @@ export function ImgIcon(props: Props) {
   if (!src) return null;
 
   return (
-    <Icon className={classes.icon} style={{height: iconHeight, width: iconWidth}}>
+    <Icon
+      className={classes.icon}
+      style={{ height: iconHeight, width: iconWidth }}
+    >
       <Image
         alt={alt}
         className={classes.img}

src/navigation/SideNavigator.tsx

@@ -24,12 +24,12 @@ import { Link, useLocation } from "react-router-dom";
 import BinsIcon from "products/Bindapt/BinsIcon";
 import { useGlobalState } from "providers";
 import {
-  hasTutorialPlaylist,
-  IsAdaptiveAgriculture,
-  IsAdCon,
-  isBXT,
+  // hasTutorialPlaylist,
+  // IsAdaptiveAgriculture,
+  // IsAdCon,
+  // isBXT,
   IsMiVent,
-  IsOmniAir
+  // IsOmniAir
 } from "services/whiteLabel";
 import MiningIcon from "products/ventilation/MiningIcon";
 import { useAuth0 } from "@auth0/auth0-react";