Materials Icons SvgIcon problem using my SVG

Question

I am creating a app in next js? Here I want to use custom svg in material icon SvgIcon component. But I am facing some problem.

In next config.js:

const optimizedImages = require('next-optimized-images');
module.exports = optimizedImages({
  images: {
    disableStaticImages: true,
  },
  env: {
    basePath: 'http://localhost:3000',
    ApiUrl: "http://localhost:3001/graphql",
  },
  webpack: (config, options) => {
    config.module.rules.push({
      test: /\.svg$/,
      use: ['@svgr/webpack'],
    })
    return config
  },
});

And Here is my component:

import { Container, Box } from "@mui/material";
import { SvgIcon } from "@mui/icons-material";
import StartIcon from "/Icon.svg";
const Header = () => {
    return (
        <Container maxWidth={false}>
            <Box>
                <SvgIcon component={StartIcon} viewBox="0 0 600 476.6" />
            </Box>
        </Container>
    );
};
export default Header;

Here I put Icon.svg in public folder. And I am getting error like this:

I try to import this way also:

import StartIcon from "./Icon.svg";
import StartIcon from "../Icon.svg";
import StartIcon from "Icon.svg";

But getting same error, here is my folder structure:

Answer 1

Put the Icon.svg file into src/Assets folder. Then access from Header.js as the following:

import StartIcon from '../Assets/Icon.svg'