How to include assets/icons in cypress component test for angular

In my Angular app, I have this header.scss, it has:

.settings-icon {
@include header-widget-top-icon('/static/0/images/app/settings_icon.svg')
}


When I run the Cypress component test, I get this error:

ERROR in ./app/my-page.component.scss?ngResource
Module Error (from ./node_modules/postcss-loader/dist/cjs.js):
/Users/john/ui/web/src/main/static/css/common/header.scss:11:2: Can't resolve '../../../../0/images/app/settings_icon.svg' in '/Users/john/ui/web/src/main/static/app/my-page'


I'm not sure if this is relevant, angular.json has these lines:

...
"architect": {
"build": {
"builder": "@angular-devkit/build-angular:browser",
"options": {
"allowedCommonJsDependencies": [
"angular-csv-ext/dist/Angular-csv",
"lodash",
"highcharts/highstock",
"moment",
"moment-timezone",
"zone.js/dist/zone-error"
],
"outputPath": "../webapp/static/0",
"preserveSymlinks": true,
"index": "index.html",
"deployUrl": "/static/0/",
...


cypress.config.ts has this:

component: {
viewportWidth: 1280,
viewportHeight: 720,
supportFile: 'cypress/support/component.ts',
indexHtmlFile: 'cypress/support/component-index.html',
devServer: {
framework: 'angular',
bundler: 'webpack',
options: {
projectConfig: {
root: '',
sourceRoot: 'app',
buildOptions: {
tsConfig: 'cypress/tsconfig-component.json',
inlineStyleLanguage: 'scss',
styles: [
'node_modules/common-ui-lib/styles/common/globals.scss',
'node_modules/tippy.js/dist/tippy.css',
'css/jsp/_lib/bootstrap.scss',
'css/jsp/_lib/framework.scss',
],
scripts: [
'node_modules/jquery/dist/jquery.min.js',
'node_modules/bootstrap/dist/js/bootstrap.min.js',
],
sourceMap: true,
namedChunks: true,
},
},
},
},
specPattern: 'cypress/tests-component/**/*component.cy.ts',
},


How can I fix the error Can't resolve '../../../../0/images/app/settings_icon.svg'. There are other similar errors too, regarding cannot find icons/assets.

Continue reading...