-
Notifications
You must be signed in to change notification settings - Fork 6.8k
Closed
Labels
P4A relatively minor issue that is not relevant to core functionsA relatively minor issue that is not relevant to core functionsarea: material/iconhelp wantedThe team would appreciate a PR from the community to address this issueThe team would appreciate a PR from the community to address this issue
Description
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"
}
ofekashery, let-aurn, twittwer, george3447, sqrter and 15 morelet-aurn, BruneXX and AnthonyNahas
Metadata
Metadata
Assignees
Labels
P4A relatively minor issue that is not relevant to core functionsA relatively minor issue that is not relevant to core functionsarea: material/iconhelp wantedThe team would appreciate a PR from the community to address this issueThe team would appreciate a PR from the community to address this issue