Unable to load SVG in Angular JS using webpack

Question

I have a code snippet in Angular JS that loads some icon SVG using the following code snippet (in icon.js):

    var loadReplaceSvg = function loadReplaceSvg(el, attrs, replace){
        import(`images/icons/${attrs.name}.svg`).then((module) => {
            const svgUrl = module.default;

          if (replace) {
            el.children()[0].remove();
          }
          el.append(svgUrl);

          el.addClass([attrs.name + "-icon", getIconSize(attrs)].join(' '));
        });

I am using webpack 4 as follows

    "font-awesome-webpack-4": "^1.0.0",
    "@svgr/webpack": "^5.0.1",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.2",
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.41.4",
    "webpack-cli": "3.1.0",
    "webpack-dev-server": "^3.10.1",

My webpack config (webpack.config.js) has the following relevant sections:

const appPath = path.join(__dirname, 'app');
const buildPath = path.join(__dirname, 'artifacts');

const config = {
    entry: [path.join(appPath, 'index.js')],

    output: {
        path: buildPath,
        filename: '[name].[hash].js',
        chunkFilename: '[name].[hash].js'
    },
    module: {
           {
                test: /\.svg$/i,
                loader: 'raw-loader'
            },
    }
    plugins: [
            new CopyWebpackPlugin([
            {from: 'app/images', to: 'assets/images'},
            {from: 'app/fonts', to: 'assets/fonts'},
            {from: 'app/templates', to: 'assets/templates'},
            {from: 'app/silent-callback.html', to: 'silent-callback.html'},
            {from: 'node_modules/font-awesome/css', to: 'assets/font-awesome/css'},
            {from: 'node_modules/font-awesome/fonts', to: 'assets/font-awesome/fonts'},
            {from: 'node_modules/angular-ui-grid/fonts', to: 'assets/fonts'},
            {from: 'node_modules/d3/d3.min.js', to: 'assets/d3'}
        ]),
    ]

However none of the icons are loaded up. From the code snippet in icon.js

import(`images/icons/${attrs.name}.svg`)

It is throwing error (console):

Uncaught (in promise) Error: Cannot find module 'images/icons/arrow-down.svg'
    at webpackEmptyContext (icons sync:2:1)
    at icon.js:20:9
webpackEmptyContext @ icons sync:2
(anonymous) @ icon.js:20
Promise.then (async)
loadReplaceSvg @ icon.js:20
(anonymous) @ icon.js:54
(anonymous) @ angular.js:9657
$digest @ angular.js:19242
$apply @ angular.js:19630
done @ angular.js:13473
completeRequest @ angular.js:13730
requestLoaded @ angular.js:13635
load (async)
(anonymous) @ angular.js:13618
sendReq @ angular.js:13418
serverRequest @ angular.js:13159
processQueue @ angular.js:18075
(anonymous) @ angular.js:18123
$digest @ angular.js:19242
$apply @ angular.js:19630
done @ angular.js:13473
completeRequest @ angular.js:13730
requestLoaded @ angular.js:13635
load (async)
(anonymous) @ angular.js:13618
sendReq @ angular.js:13418
serverRequest @ angular.js:13159
processQueue @ angular.js:18075
(anonymous) @ angular.js:18123
$digest @ angular.js:19242
$apply @ angular.js:19630
done @ angular.js:13473
completeRequest @ angular.js:13730
requestLoaded @ angular.js:13635
load (async)
(anonymous) @ angular.js:13618
sendReq @ angular.js:13418
serverRequest @ angular.js:13159
processQueue @ angular.js:18075
(anonymous) @ angular.js:18123
$digest @ angular.js:19242
$apply @ angular.js:19630
(anonymous) @ angular.js:29127
dispatch @ jquery.js:5145
elemData.handle @ jquery.js:4949

If I change the icon.js load code line prepending with assets like import(assets/images/icons/${attrs.name}.svg) -- still the issue exists.

Not able to understand what I am missing here.

Any help will be appreciated.