build: remove redundant icons dependency md-material-ui

package.json

@@ -52,7 +52,6 @@
     "classnames": "^2.3.2",
     "clipboard-copy": "^4.0.1",
     "lodash": "^4.17.21",
-    "mdi-material-ui": "^7.7.0",
     "react": "^18.2.0",
     "react-animate-height": "^3.2.2",
     "react-cookie": "^4.1.1",

src/components/SocialLoginButtons.tsx

@@ -6,7 +6,7 @@
 import { Link } from 'react-router-dom'
 import Box from '@mui/material/Box'
 import Grid from '@mui/material/Grid'
-import Google from 'mdi-material-ui/Google'
+import GoogleIcon from '@mui/icons-material/Google'
 
 const SocialLoginButtons = (): JSX.Element => (
   <Box
@@ -26,7 +26,7 @@ const SocialLoginButtons = (): JSX.Element => (
       <Grid item style={{ paddingTop: 0 }}>
         {/* TODO: implement with identity provider */}
         <Link to="/" reloadDocument>
-          <Google sx={{ color: '#db4437' }} />
+          <GoogleIcon sx={{ color: '#db4437' }} />
         </Link>
       </Grid>
     </Grid>

src/views/Dashboard/Team/components/TeamMembersTable.tsx

@@ -6,8 +6,8 @@ import { type ReactElement } from 'react'
 import Box from '@mui/material/Box'
 import Card from '@mui/material/Card'
 import Typography from '@mui/material/Typography'
-import CogIcon from 'mdi-material-ui/Cog'
-import AccountIcon from 'mdi-material-ui/AccountOutline'
+import SettingsIcon from '@mui/icons-material/Settings'
+import AccountIcon from '@mui/icons-material/AccountCircleOutlined'
 import { DataGrid, GridColDef } from '@mui/x-data-grid'
 import UserAvatar from '@/components/UserAvatar'
 import { TeamMemberRole, TeamMemberTableRow } from '@/types'
@@ -20,7 +20,9 @@ type UserRoleToIconObject = {
  * @constant {RoleIconsObject} roleIcons Mapping of user roles to their icons.
  */
 const roleIcons: UserRoleToIconObject = Object.freeze({
-  [TeamMemberRole.TEAM_LEAD]: <CogIcon sx={{ mr: 1, color: 'error.main' }} />,
+  [TeamMemberRole.TEAM_LEAD]: (
+    <SettingsIcon sx={{ mr: 1, color: 'error.main' }} />
+  ),
   [TeamMemberRole.MEMBER]: (
     <AccountIcon sx={{ mr: 1, color: 'primary.main' }} />
   ),

src/views/Dashboard/Team/components/TeamViewProjectCard.tsx

@@ -8,7 +8,7 @@ import Typography from '@mui/material/Typography'
 import IconButton from '@mui/material/IconButton'
 import CardHeader from '@mui/material/CardHeader'
 import CardContent from '@mui/material/CardContent'
-import DotsVertical from 'mdi-material-ui/DotsVertical'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
 import SbomUploadInput from '@/components/SbomUploadInput'
 import { Project } from '@/types'
 
@@ -50,7 +50,7 @@ const TeamViewProjectCard = ({ teamId, project }: InputProps): JSX.Element => {
             aria-label="settings"
             className="card-more-options"
           >
-            <DotsVertical />
+            <MoreVertIcon />
           </IconButton>
         }
       ></CardHeader>

src/views/Dashboard/Team/components/TeamViewProjectCreateCard.tsx

@@ -17,7 +17,7 @@ import MenuItem from '@mui/material/MenuItem'
 import Select from '@mui/material/Select'
 import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
-import DotsVertical from 'mdi-material-ui/DotsVertical'
+import MoreVertIcon from '@mui/icons-material/MoreVert'
 import { BuildTool, Codebase, CodebaseLanguage, Project } from '@/types'
 import {
   defaultProject,
@@ -125,7 +125,7 @@ const TeamViewProjectCreateCard = ({
             aria-label="settings"
             className="card-more-options"
           >
-            <DotsVertical />
+            <MoreVertIcon />
           </IconButton>
         }
       ></CardHeader>

src/views/Dashboard/Team/components/TeamViewProjectCreationCard.tsx

@@ -4,7 +4,7 @@
 import * as React from 'react'
 import Card from '@mui/material/Card'
 import Button from '@mui/material/Button'
-import PlusOutline from 'mdi-material-ui/PlusOutline'
+import AddCircleOutlinedOutline from '@mui/icons-material/AddCircleOutlined'
 import Avatar from '@/components/mui/Avatar'
 import { CenteredCardContent } from '@/components/mui/CardContent'
 
@@ -21,7 +21,7 @@ const TeamViewProjectCreationCard = (props: InputProps): JSX.Element => (
   <Card>
     <CenteredCardContent>
       <Avatar skin="light" sx={{ width: 56, height: 56, mb: 2 }}>
-        <PlusOutline sx={{ fontSize: '2rem' }} />
+        <AddCircleOutlinedOutline sx={{ fontSize: '2rem' }} />
       </Avatar>
       <Button
         variant="outlined"

src/views/SignIn/SignIn.tsx

@@ -23,8 +23,8 @@ import TextField from '@mui/material/TextField'
 import Typography from '@mui/material/Typography'
 import useMediaQuery from '@mui/material/useMediaQuery'
 import { useTheme } from '@mui/material/styles'
-import EyeOutline from 'mdi-material-ui/EyeOutline'
-import EyeOffOutline from 'mdi-material-ui/EyeOffOutline'
+import VisibilityOutline from '@mui/icons-material/Visibility'
+import VisibilityOffIcon from '@mui/icons-material/VisibilityOff'
 import loginUser from '@/actions/loginUser'
 import LinearIndeterminate from '@/components/mui/LinearLoadingBar'
 import { useAuthDispatch } from '@/hooks/useAuth'
@@ -226,9 +226,9 @@ const LoginPage = () => {
                               onClick={() => setShowPassword(!showPassword)}
                             >
                               {showPassword ? (
-                                <EyeOutline />
+                                <VisibilityOutline />
                               ) : (
-                                <EyeOffOutline />
+                                <VisibilityOffIcon />
                               )}
                             </IconButton>
                           </InputAdornment>

yarn.lock

@@ -14709,16 +14709,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mdi-material-ui@npm:^7.7.0":
-  version: 7.7.0
-  resolution: "mdi-material-ui@npm:7.7.0"
-  peerDependencies:
-    "@mui/material": ^5.0.0 || ^5.0.0-rc.0
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 5dd565522dc4689e5e45b363134a71ac57145a5342e08cdac6725295a45545bb932cf8498dd71d76416793454304af9625b2436af85d553e91a54acb4234f637
-  languageName: node
-  linkType: hard
-
 "media-typer@npm:0.3.0":
   version: 0.3.0
   resolution: "media-typer@npm:0.3.0"
@@ -17780,7 +17770,6 @@ __metadata:
     jest-watch-typeahead: ^2.2.2
     lint-staged: ^13.2.3
     lodash: ^4.17.21
-    mdi-material-ui: ^7.7.0
     npm-run-all: ^4.1.5
     prettier: ^3.0.0
     pretty-quick: ^3.1.3