Universal SSR: adding SVG icon set to matIconRegistry fails with NAMESPACE_ERR (14)

[milosbr]

Bug, feature request, or proposal:

Bug.
When using Angular Universal, if custom icon set is provided to matIconRegistry through .addSvgIconSet or .addSvgIconSetInNamespace, error shows in console:

Error retrieving icon: NAMESPACE_ERR (14): the operation is not allowed by Namespaces in XML.
and icon is not shown in template (<mat-icon [svgIcon]="icon"></mat-icon>)

As referenced here: #9519
it is Domino issue and it is fixed with latest version 2.0.1,
but here bug remains:

What is the expected behavior?

Show icons from icon set on templates and no error in console

What is the current behavior?

Icons from icon set are not shown in templates and mentioned error occurs in console.

What are the steps to reproduce?

import {Component, OnInit, Inject} from '@angular/core';
import {MatIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
import { PLATFORM_ID } from '@angular/core';
import { isPlatformBrowser, isPlatformServer } from '@angular/common';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent implements OnInit {

  constructor(private _matIconRegistry: MatIconRegistry, private _domSanitizer: DomSanitizer, @Inject(PLATFORM_ID) private platformId: string) {
    const svgUrl = 'assets/icons/symbol-defs.svg';
    const domain = (isPlatformServer(platformId)) ? 'http://localhost:4000/' : ''; 
    // this doesn't work on ssr
    this._matIconRegistry.addSvgIconSet(this._domSanitizer.bypassSecurityTrustResourceUrl(domain + svgUrl));
    // this also
    // this._matIconRegistry.addSvgIconSetInNamespace('ui', this._domSanitizer.bypassSecurityTrustResourceUrl(domain + svgUrl));
  }

  ngOnInit() {
  }

}

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

Mentioned issue is closed with explanation that this is Domino issue. Domino released version 2.0.1 that includes fix, but bug remains when using svg icon sets.

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

{
"dependencies": {
    "@angular/animations": "5.2.6",
    "@angular/cdk": "5.2.3",
    "@angular/common": "5.2.6",
    "@angular/compiler": "5.2.6",
    "@angular/core": "5.2.6",
    "@angular/forms": "5.2.6",
    "@angular/http": "5.2.6",
    "@angular/material": "5.2.3",
    "@angular/platform-browser": "5.2.6",
    "@angular/platform-browser-dynamic": "5.2.6",
    "@angular/platform-server": "5.2.6",
    "@angular/router": "5.2.6",
    "@ngforage/ngforage-ng5": "1.0.5",
    "@nguniversal/express-engine": "5.0.0-beta.5",
    "@nguniversal/module-map-ngfactory-loader": "5.0.0-beta.5",
    "@ngx-translate/core": "9.1.1",
    "@ngx-translate/http-loader": "2.0.1",
    "angulartics2": "5.1.1",
    "apollo-angular": "1.0.1",
    "apollo-angular-link-http": "1.0.1",
    "apollo-cache-inmemory": "1.1.5",
    "apollo-client": "2.2.0",
    "apollo-link-context": "1.0.3",
    "core-js": "2.5.3",
    "countdown": "2.6.0",
    "domino": "2.0.1",
    "fontfaceobserver": "2.0.13",
    "foundation-sites": "6.4.3",
    "fraction.js": "4.0.4",
    "fuzzyjs": "2.1.2",
    "graphql": "0.12.3",
    "graphql-tag": "2.6.1",
    "lodash-es": "4.17.5",
    "moment": "2.20.1",
    "moment-timezone": "0.5.14",
    "ng2-date-picker": "2.7.4",
    "rxjs": "5.5.6",
    "ts-loader": "3.3.1",
    "web-animations-js": "2.3.1",
    "zone.js": "0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "1.7.1",
    "@angular/compiler-cli": "5.2.6",
    "@angularclass/hmr": "2.1.3",
    "@biesbjerg/ngx-translate-extract": "2.3.4",
    "@types/hammerjs": "2.0.35",
    "@types/jasmine": "2.8.6",
    "@types/lodash": "4.14.104",
    "@types/node": "9.4.6",
    "chalk": "2.3.1",
    "codelyzer": "4.1.0",
    "jasmine-core": "2.9.1",
    "jasmine-spec-reporter": "4.2.1",
    "karma": "2.0.0",
    "karma-chrome-launcher": "2.2.0",
    "karma-cli": "1.0.1",
    "karma-coverage": "1.1.1",
    "karma-coverage-istanbul-reporter": "1.4.1",
    "karma-jasmine": "1.1.1",
    "karma-jasmine-html-reporter": "0.2.2",
    "lite-server": "2.3.0",
    "marked": "0.3.16",
    "mkdirp": "0.5.1",
    "nodemon": "1.15.1",
    "prismjs": "1.11.0",
    "protractor": "5.3.0",
    "rimraf": "2.6.2",
    "ts-node": "4.1.0",
    "tslint": "5.9.1",
    "typescript": "2.5.3",
    "unzip": "0.1.11"
  }
}

Is there anything else we should know?

Adding individual icons to registry (with both default and custom namespace) works as it should

[CaerusKaru]

I don’t think you understand the real issue: Universal (which lives in @angular/platform-server) is the one that depends on domino. Material has nothing to do with this. Not only that, but this will be patched in the next beta release for Angular.

This can be closed since it’s not a Material issue.

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