Components: Using custom icon sets with Angular Universal fails with SVG namespace error

Created on 22 Jan 2018 · 3Comments · Source: angular/components

When using a custom icon set, the server rendering of Angular Universal outputs Error retrieving icon: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML and leaves the mat-icon tag empty.

Bug, feature request, or proposal:

Bug

What is the expected behavior?

Server-rendering of the mat-icon tag containing an SVG tag with the custom icon.

What is the current behavior?

Error message Error retrieving icon: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML and empty mat-icon tags. Client-side rendering works fine.

What are the steps to reproduce?

Defining a custom icon set in the app module in an Angular Universal project:

export class MaterialModule {
  constructor(
    matIconRegistry: MatIconRegistry,
    domSanitizer: DomSanitizer,
    @Inject(PLATFORM_ID) private platformId: Object
  ) {
    const server = 'http://localhost:' + ('PORT' in process.env ? process.env.PORT : 4000);
    const iconSetUrl = (isPlatformServer(this.platformId) ? server : '') + '/assets/mdi.svg';
    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl(iconSetUrl));
  }
}

Using an icon of the icon set like so:

<mat-icon svgIcon="gift"></mat-icon>

What is the use-case or motivation for changing an existing behavior?

Server-side rendering should work fine, even with custom icon sets.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

    "@angular/animations": "^5.2.1",
    "@angular/cdk": "^5.1.0",
    "@angular/cli": "^1.5.0",
    "@angular/common": "^5.0.0",
    "@angular/compiler": "^5.0.0",
    "@angular/compiler-cli": "^5.0.0",
    "@angular/core": "^5.0.0",
    "@angular/forms": "^5.0.0",
    "@angular/http": "^5.0.0",
    "@angular/material": "^5.1.0",
    "@angular/platform-browser": "^5.0.0",
    "@angular/platform-browser-dynamic": "^5.0.0",
    "@angular/platform-server": "^5.0.0",
    "@angular/router": "^5.0.0",
    "@nguniversal/express-engine": "^5.0.0-beta.5",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",

Is there anything else we should know?

Commenting out this line in the generated dist/server.js solves the issue.

Source

FloEdelmann

Most helpful comment

I'm going to close this issue, because there is nothing we can do on our end.

devversion on 24 Jan 2018

👎14 👍2

All 3 comments

This seems to have been fixed with the latest version of Domino (https://github.com/fgnass/domino/commit/b16cb1923f83db096b7cd0638734474e54b3308d). Although it's not released yet, and Angular can't use it yet.

devversion on 22 Jan 2018

😕2 👍2

I'm going to close this issue, because there is nothing we can do on our end.

devversion on 24 Jan 2018

👎14 👍2

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._}