Assets not cosidering base href url - not found error

Question

I just copied my angular build scripts within my webform project and deployed that project in IIS.

Note: I have only copied scripts file not deployed separately inside the IIS.

I have copied angular dist folder inside the Scripts folder in webform project.

Right now my base url is: http://localhost/Angular2/

In Angular I have set the base href to "../../Scripts/dist" inside index.html file.

Everything is working fine like routing, loading images, js files etc. Only svg icons are not getting loaded and getting 404 Not Found error.

For Angular page, except svg, everything(css,jpg,js) is loaded from http://localhost/Angular2/Scripts/dist/main.js etc.

But the svg icons are trying to get load from path
http://localhost/Angular2/assets/features/home.svg in stead of http://localhost/Angular2/Scripts/dist/assets/features/home.svg

I am not sure why for svg icons, base href is not working.

Below is the code where I am using svg icons using material library.

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('/assets/features/home.svg'));
    iconRegistry.addSvgIcon('library', sanitizer.bypassSecurityTrustResourceUrl('/assets/features/library.svg'));
    iconRegistry.addSvgIcon('guest', sanitizer.bypassSecurityTrustResourceUrl('/assets/features/guest.svg'));

If I modified the above lines with the below one then it is working fine.

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('Scripts/dist/assets/features/home.svg'));
    iconRegistry.addSvgIcon('library', sanitizer.bypassSecurityTrustResourceUrl('Scripts/dist/assets/features/library.svg'));
    iconRegistry.addSvgIcon('guest', sanitizer.bypassSecurityTrustResourceUrl('Scripts/dist/assets/features/guest.svg'));

May I know why base href is not applying for svg icons?

Thanks in advance.

Answer 1

try using relative paths:

changing

'/assets/features/home.svg'

to

'./assets/features/home.svg'

your code:

constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
    iconRegistry.addSvgIcon('home', sanitizer.bypassSecurityTrustResourceUrl('./assets/features/home.svg'));
    iconRegistry.addSvgIcon('library', sanitizer.bypassSecurityTrustResourceUrl('./assets/features/library.svg'));
    iconRegistry.addSvgIcon('guest', sanitizer.bypassSecurityTrustResourceUrl('./assets/features/guest.svg'));