Replace material icons by local png

components/switch-theme.js

@@ -1,9 +1,11 @@
 import PropTypes from 'prop-types'
+import Image from 'next/image'
 import {styled} from '@mui/material/styles'
-import LightModeIcon from '@mui/icons-material/LightMode'
-import DarkModeIcon from '@mui/icons-material/DarkMode'
 import {Box} from '@mui/material'
 
+import lightSwitch from '../public/theme-switch/light.png'
+import darkSwitch from '../public/theme-switch/dark.png'
+
 const PREFIX = 'switch-theme'
 
 const classes = {
@@ -38,9 +40,25 @@ export default function SwitchTheme({switchFixed, mode, setMode}) {
     <StyledBox>
       <div className={switchFixed ? classes.switchFixed : classes.switch} >
         {mode === 'dark' ? (
-          <LightModeIcon onClick={() => handleClick('light')} />
+          <Image
+            alt='Logo #OKi'
+            width={24}
+            height={24}
+            src={darkSwitch}
+            placeholder='blur'
+            quality={10}
+            onClick={() => handleClick('light')}
+          />
         ) : (
-          <DarkModeIcon onClick={() => handleClick('dark')} />
+          <Image
+            alt='Logo #OKi'
+            width={24}
+            height={24}
+            src={lightSwitch}
+            placeholder='blur'
+            quality={10}
+            onClick={() => handleClick('dark')}
+          />
         )}
       </div>
     </StyledBox>