How to include icons and fonts file in webpack 4 in react?

Question

I am using bootstrap theme for my project which have scss files for fonts and icons. I am implementing the webpack 4 but my build gone fialed every time when i include fonts and icons files. When i comment these files my webpack create the build, but that files are important. When build failed i got the error

ERROR in ./src/components/CommonForBoth/rightbar.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/CommonForBoth/rightbar.scss)
Module not found: Error: Can't resolve '../../../../fonts/materialdesignicons-webfont.woff?v=5.0.45' in 'C:\Users\zeesh\Desktop\prop-pro\src\components\CommonForBoth'
 @ ./src/components/CommonForBoth/rightbar.scss (./node_modules/css-loader/dist/cjs.js!./node_modules/sass-loader/dist/cjs.js!./src/components/CommonForBoth/rightbar.scss) 7:41-111
 @ ./src/components/CommonForBoth/rightbar.scss
 @ ./src/components/CommonForBoth/Rightbar.js
 @ ./src/components/HorizontalLayout/index.js
 @ ./src/App.js
 @ ./src/index.js

now the rightbar.scss is using theme.scss file and theme.scss file is using icons.scss file which makes issue while creating the build. i have wasted alot of days in finding this issue, but cannot find any solution, why my icons and fonts files are not including, If anybody knows? Kindly help me.

Rightbar.scc file

    @import "../../theme.scss";

.radio-toolbar input[type="radio"] {
  opacity: 0;
  position: fixed;
  width: 0;
}
.radio-toolbar label {
  display: inline-block;
  background-color: $gray-300;
  cursor: pointer;
  padding: 5px 10px;
  font-size: 14px;
  border-radius: 4px;
}
.radio-toolbar input[type="radio"]:checked + label {
  background-color: $primary;
  border: none;
  color: $white;
}

#radio-title {
  margin-bottom: 5px;

}

Theme.scss File

   //Import Icon scss
@import "./assets/scss/icons.scss";

//import Light Theme
@import "./assets/scss/bootstrap.scss";
@import "./assets/scss/app.scss";

_icons.scss file

    /*
Template Name: Nazox - Responsive Bootstrap 4 Admin Dashboard
Author: Themesdesign
Contact: [email protected]
File: Icons Css File
*/

// Plugins
@import "custom/plugins/icons";

icons file from icons.scss file

    //
// icons.scss
//

@import "icons/materialdesignicons";
@import "icons/fontawesome-all";
@import "icons/dripicons";
@import "icons/remixicon";

_materialdesignicons.scss file from icons.scss file

    * MaterialDesignIcons.com */
@font-face {
  font-family: "Material Design Icons";
  src: url("../../../../fonts/materialdesignicons-webfont.eot");
  src: url("../../../../fonts/materialdesignicons-webfont.eot")
      format("embedded-opentype"),
    url("../../../../fonts/materialdesignicons-webfont.woff2") format("woff2"),
    url("../../../../fonts/materialdesignicons-webfont.woff") format("woff"),
    url("../../../../fonts/materialdesignicons-webfont.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

.mdi:before,
.mdi-set {
  display: inline-block;
  font: normal normal normal 24px/1 "Material Design Icons";
  font-size: inherit;
  text-rendering: auto;
  line-height: inherit;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.mdi-ab-testing::before {
  content: "\F01C9";
}

.mdi-abjad-arabic::before {
  content: "\F1328";
}

.mdi-abjad-hebrew::before {
  content: "\F1329";
}

.mdi-abugida-devanagari::before {
  content: "\F132A";
}

.mdi-abugida-thai::before {
  content: "\F132B";
}

.mdi-access-point::before {
  content: "\F0003";
}

.mdi-access-point-network::before {
  content: "\F0002";
}

.mdi-access-point-network-off::before {
  content: "\F0BE1";
}

devdependencies i am using regarding my project requirements

 "devDependencies": {
"@babel/core": "^7.9.0",
"@babel/preset-env": "^7.16.11",
"@babel/preset-react": "^7.16.7",
"babel-loader": "^8.1.0",
"css-loader": "^2.1.0",
"file-loader": "^4.3.0",
"html-webpack-plugin": "^4.0.0-beta.11",
"laravel-echo": "^1.11.2",
"pusher-js": "^7.0.3",
"react-error-overlay": "6.0.9",
"sass": "^1.51.0",
"sass-loader": "^8.0.2",
"style-loader": "^0.23.1",
"url-loader": "^2.3.0",
"webpack": "^4.42.0",
"webpack-cli": "^3.3.12"


}

my webpack file

    const path = require("path");
// const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
    publicPath: "/dist/",
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.(css|scss)$/,
        use: ["style-loader", "css-loader", "sass-loader"],
      },
      {
        test: /\.(png|jpe?g|svg|gif)$/i,
        use: ["file-loader", "url-loader"],
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/i,
        use: [
          {
            loader: "file-loader",
          },
        ],
      },
    ],
  },
  // ...add resolve to .jsx extension
  resolve: {
    extensions: ["*", ".js", ".jsx", ".css"],
  },
};