bug(mat-icon): SVG icons don't work with Angular Universal prerendering - npm run prerender: Error retrieving icon

[anisabboud]

Description

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

Previous reports of this issue:

• Error retrieving icon universal#2685
  (closed claiming insufficient information)
• Universal and Angular Material Icon ERROR Error: Error retrieving icon :lock! ErrorEvent is not defined universal#2573
  (closed claiming insufficient information)
• Error when retrieving icon from registry in server side rendering #9728
  (reported in Feb 2018 and closed by the author after getting no solution for ~4 years, and locked by the amazing bot.)

Reproduction

Steps to reproduce:

1. Create 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.

Expected Behavior

Expected <mat-icon svgIcon="angular" /> to work with Angular Universal prerendering (just like it works fine with ng serve).

Actual Behavior

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.

Environment

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

cc: @alan-agius4

[crisbeto]

By default mat-icon makes an HTTP request to fetch the icon's source which your server doesn't appear to be set up for. We also have APIs (e.g. MatIconRegistry.addSvgIconLiteral) that allow you to provide the icon as a string literal which should work.

[anisabboud]

Thank you for the response @crisbeto.
There is no server set up here. I'm only running the default npm run prerender and the prerendering fails with Error (see the reproduction steps).

This seems like an issue between Angular Material and Angular Universal, and having mat-icon fully work with npm run prerender would improve consistency between these two angular sub-projects (even if that's a lower priority).

[crisbeto]

Material uses the HttpClient from @angular/common/http to make the request so there isn't much more we can do on our end.

[anisabboud]

I understand. Perhaps this case should be handled by the Angular Universal team?

Other people previously opened issues there (angular/universal#2685 and angular/universal#2573) but they didn't explain the reproduction steps clearly enough, so the issues were closed without a fix.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}