Skip to content

Error when retrieving icon from registry in server side rendering #9728

@akanass

Description

@akanass

Bug, feature request, or proposal:

When we register some icons in MatIconRegistry and access to them in SSR, we have some errors and icons aren't displayed.

What is the expected behavior?

Display icons and not have error in the console

What is the current behavior?

Icon aren't displayed and we have error in the console

What are the steps to reproduce?

Create a component and register an icon in MatIconRegistry:

import {Component, OnInit} from '@angular/core';
import {MatIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';

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

  constructor(private _matIconRegistry: MatIconRegistry, private _domSanitizer: DomSanitizer) {
    this._matIconRegistry.addSvgIcon('loader', this._domSanitizer.bypassSecurityTrustResourceUrl('assets/Icons/loader-default.svg'));
  }

  ngOnInit() {
  }

}
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    // Make AppModule compatible with Universal
    BrowserModule.withServerTransition({ appId: 'universal-app' }),
    MatIconModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule {
}

Access to it in server side rendering:

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

In the console you'll have this message:

Error retrieving icon:
ERROR [Error]

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

MatIconRegistry should work in SSR

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

"dependencies": {
    "@angular/animations": "^5.2.2",
    "@angular/cdk": "^5.1.1",
    "@angular/common": "^5.2.2",
    "@angular/compiler": "^5.2.2",
    "@angular/core": "^5.2.2",
    "@angular/forms": "^5.2.2",
    "@angular/http": "^5.2.2",
    "@angular/material": "^5.1.1",
    "@angular/platform-browser": "^5.2.2",
    "@angular/platform-browser-dynamic": "^5.2.2",
    "@angular/platform-server": "^5.2.2",
    "@angular/router": "^5.2.2",
    "@hapiness/config": "^1.1.1",
    "@hapiness/core": "^1.3.0",
    "@hapiness/ng-universal": "^5.2.2",
    "@hapiness/ng-universal-transfer-http": "^5.2.2",
    "@nguniversal/module-map-ngfactory-loader": "^5.0.0-beta.5",
    "core-js": "^2.5.1",
    "rxjs": "^5.5.6",
    "zone.js": "^0.8.20"
  },
  "devDependencies": {
    "@angular/cli": "^1.6.6",
    "@angular/compiler-cli": "^5.2.2",
    "@angular/language-service": "^5.2.2",
    "@types/jasmine": "~2.8.3",
    "@types/jasminewd2": "~2.0.2",
    "@types/node": "^9.4.0",
    "codelyzer": "^4.1.0",
    "jasmine-core": "~2.8.0",
    "jasmine-spec-reporter": "~4.2.1",
    "karma": "~2.0.0",
    "karma-chrome-launcher": "~2.2.0",
    "karma-coverage-istanbul-reporter": "^1.2.1",
    "karma-jasmine": "~1.1.0",
    "karma-jasmine-html-reporter": "^0.2.2",
    "protractor": "~5.1.2",
    "ts-loader": "^3.3.1",
    "ts-node": "^4.0.1",
    "tslint": "^5.9.1",
    "typescript": "^2.6.2"
  }

Metadata

Metadata

Assignees

No one assigned

    Labels

    P4A relatively minor issue that is not relevant to core functionsarea: material/iconhelp wantedThe team would appreciate a PR from the community to address this issue

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions