Skip to content

MatIcon component crashes the Angular app if space is used in fontIcon binding #9054

Closed
@karan-kang

Description

@karan-kang

Bug:

Angular throws an error if a dynamic value with space is used as a value for fontIcon binding in MatIcon component.

What is the expected behavior?

Should skip displaying an icon, since the value provided was not found in the font icon set.

What is the current behavior?

Throws an error:

ERROR DOMException: Failed to execute 'add' on 'DOMTokenList': The token provided ('fa fa-eye') contains HTML space characters, which are not valid in tokens.
    at DefaultDomRenderer2.webpackJsonp.../../../platform-browser/@angular/platform-browser.es5.js.DefaultDomRenderer2.addClass (http://localhost:8080/TestApp/en-US/vendor.bundle.js:186272:81)
    at BaseAnimationRenderer.webpackJsonp.../../../platform-browser/@angular/platform-browser/animations.es5.js.BaseAnimationRenderer.addClass (http://localhost:8080/TestApp/en-US/vendor.bundle.js:188318:84)
    at DebugRenderer2.webpackJsonp.../../../core/@angular/core.es5.js.DebugRenderer2.addClass (http://localhost:8080/TestApp/en-US/vendor.bundle.js:145041:23)
    at MatIcon.webpackJsonp.../../../material/esm5/icon.es5.js.MatIcon._updateFontIconClasses (http://localhost:8080/TestApp/en-US/vendor.bundle.js:170280:32)
    at MatIcon.webpackJsonp.../../../material/esm5/icon.es5.js.MatIcon.ngOnChanges (http://localhost:8080/TestApp/en-US/vendor.bundle.js:170216:18)
    at checkAndUpdateDirectiveInline (http://localhost:8080/TestApp/en-US/vendor.bundle.js:142180:19)
    at checkAndUpdateNodeInline (http://localhost:8080/TestApp/en-US/vendor.bundle.js:143691:17)
    at checkAndUpdateNode (http://localhost:8080/TestApp/en-US/vendor.bundle.js:143630:16)
    at debugCheckAndUpdateNode (http://localhost:8080/TestApp/en-US/vendor.bundle.js:144494:59)
    at debugCheckDirectivesFn (http://localhost:8080/TestApp/en-US/vendor.bundle.js:144435:13)
View_TestCollectionComponent_3 @ TestCollectionComponent.html:6
12:24:16.711 

What are the steps to reproduce?

https://angular-material2-issue-r9zsub.stackblitz.io

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

Angular: 4.4.4, 5.0.0
Angular Material 2: 2.0.0-beta.12, 5.0.0

Metadata

Metadata

Assignees

Labels

P3An issue that is relevant to core functions, but does not impede progress. Important, but not urgent

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions