npm run prerender doesn't work with Angular Material mat-icon SVG icons: Error retrieving icon

[anisabboud]

🐞 Bug report

What modules are related to this issue?

• builders
• mat-icon

Description

<mat-icon svgIcon="..." /> throw error on npm run prerender.

🔬 Minimal Reproduction

1. Create a new project: ng new test-prerender-svg-icon
2. Add Angular Material: ng add @angular/material
3. Add Angular Universal: ng add @nguniversal/express-engine
4. Download any svg icon like https://angular.io/assets/images/logos/angular/angular.svg into src/assets/
5. app.component.html: Replace all default content with:

   <mat-icon svgIcon="angular" />

6. app.module.ts:

   import { HttpClientModule } from '@angular/common/http';
   import { NgModule } from '@angular/core';
   import { MatIconModule, MatIconRegistry } from '@angular/material/icon';
   import { BrowserModule, DomSanitizer } from '@angular/platform-browser';
   import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
   
   import { AppComponent } from './app.component';
   
   @NgModule({
     declarations: [
       AppComponent
     ],
     imports: [
       BrowserModule.withServerTransition({ appId: 'serverApp' }),
       BrowserAnimationsModule,
       HttpClientModule,  // Required for using iconRegistry.
       MatIconModule,
     ],
     providers: [],
     bootstrap: [AppComponent]
   })
   export class AppModule {
     constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
       // See: https://material.angular.io/components/icon/overview#svg-icons.
       iconRegistry.addSvgIcon('angular', sanitizer.bypassSecurityTrustResourceUrl('/assets/angular.svg'));
     }
   }

7. ng serve works fine and shows the svg icon.
8. npm run prerender => ERROR Error: Error retrieving icon :angular!
9. Same error with npm run dev:ssr.

🔥 Exception or Error

npm run prerender throws Error retrieving icon:

⠹ Prerendering 1 route(s) to ~/test-prerender-svg-icon/dist/test-prerender-svg-icon/browser...ERROR Error: Error retrieving icon :angular!
    at Object.error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:3655776)
    at ConsumerObserver2.error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:1216955)     
    at SafeSubscriber2.Subscriber2._error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:1216140)
    at SafeSubscriber2.Subscriber2.error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:1215674)
    at OperatorSubscriber2.Subscriber2._error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:1216140)
    at OperatorSubscriber2.Subscriber2.error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:1215674)
    at OperatorSubscriber2.Subscriber2._error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:1216140)
    at OperatorSubscriber2.Subscriber2.error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:1215674)
    at OperatorSubscriber2.Subscriber2._error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1:1216140)
    at OperatorSubscriber2.Subscriber2.error (~/test-prerender-svg-icon/dist/test-prerender-svg-icon/server/main.js:1✔ 
Prerendering routes to ~/test-prerender-svg-icon/dist/test-prerender-svg-icon/browser complete.

🌍 Your Environment

• @angular/cli: 15.1.6
• @angular/core: 15.1.6
• @angular/material: 15.1.5
• @nguniversal/express-engine 15.1.0

Previous reports of this issue (closed without a solution)

• Error retrieving icon universal#2685
• Universal and Angular Material Icon ERROR Error: Error retrieving icon :lock! ErrorEvent is not defined universal#2573
• Error when retrieving icon from registry in server side rendering components#9728
• bug(mat-icon): SVG icons don't work with Angular Universal prerendering - npm run prerender: Error retrieving icon components#26655

[BenLune]

Hello,
Unfortunately I confirm this problem. I give more detail, quite surprising and a bit worrying... The same code works with serve-ssr but not with prerender...
I was able to make it work with ssr using inject(DOCUMENT).location.origin. Using prerender this value is undefined://