[md-icon] Unable to find icon in svg set. Possible bug

[RoxKilly]

I just upgraded from ng2 rc4 with material2 alpha6 to ng2 rc5 with material 2 alpha7-2. A new error pops up on code that worked before when I use md-icon. It may be a bug.

I cannot see the full error text because instead I get Observable_1.Observable.throw is not a function error (the app crashes), with the top lines in the stacktrace being:

MdIconRegistry.prototype.getNamedSvgIcon @angular2-material/icon/icon-registry.js:180:16
MdIcon.prototype.ngOnChanges @angular2-material/icon/icon.js:107:17

If I console.log() the id of the icon sought just above icon-registry.js @ line 180, I see ic_lightbulb_outline_24px. This icon is present in my svg sprite, but it displayed properly before I upgraded today to material 2 alpha 7-2. Here is its section in the svg sprite:

...</svg> <svg viewBox="0 0 24 24" id="ic_lightbulb_outline_24px"><path d="..."/></svg>...

The template:

<md-icon svgIcon="ic_lightbulb_outline_24px"></md-icon>

In my main AppComponent I have

this._iconRegistry.addSvgIconSet('src/icons/sprite.defs.svg');

I've also imported MdIconModule into the main AppModule. What's really puzzling is that

• the same icon from the same sprite file works on other components and
• this worked before the upgrade!

Any ideas?
(cross-posted on StackOverflow)

[RoxKilly]

Below is the full stacktrace:

MdIconRegistry.prototype.getNamedSvgIcon /@angular2-material/icon/icon-registry.js:180:16
MdIcon.prototype.ngOnChanges /@angular2-material/icon/icon.js:107:17
anonymous/_View_UserProfileComponent6.prototype.detectChangesInternal@UserProfileComponent.ngfactory.js:1318:29
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13
AppView</AppView.prototype.detectContentChildrenChanges /@angular/core//bundles/core.umd.js:12604:17
anonymous/_View_UserProfileComponent1.prototype.detectChangesInternal@UserProfileComponent.ngfactory.js:294:3
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13
AppView</AppView.prototype.detectContentChildrenChanges /@angular/core//bundles/core.umd.js:12604:17
anonymous/_View_UserProfileComponent0.prototype.detectChangesInternal@UserProfileComponent.ngfactory.js:37:3
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13
AppView</AppView.prototype.detectViewChildrenChanges /@angular/core//bundles/core.umd.js:12612:17
anonymous/_View_UserProfileComponent_Host0.prototype.detectChangesInternal@UserProfileComponent.ngfactory.js:28:3
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13
AppView</AppView.prototype.detectContentChildrenChanges /@angular/core//bundles/core.umd.js:12604:17
AppView</AppView.prototype.detectChangesInternal /@angular/core//bundles/core.umd.js:12596:13
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13
AppView</AppView.prototype.detectViewChildrenChanges /@angular/core//bundles/core.umd.js:12612:17
AppView</AppView.prototype.detectChangesInternal /@angular/core//bundles/core.umd.js:12597:13
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13
AppView</AppView.prototype.detectContentChildrenChanges /@angular/core//bundles/core.umd.js:12604:17
anonymous/_View_AppComponent0.prototype.detectChangesInternal@AppComponent.ngfactory.js:445:3
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13
AppView</AppView.prototype.detectViewChildrenChanges /@angular/core//bundles/core.umd.js:12612:17
anonymous/_View_AppComponent_Host0.prototype.detectChangesInternal@AppComponent.ngfactory.js:30:3
AppView</AppView.prototype.detectChanges /@angular/core//bundles/core.umd.js:12586:13
ViewRef_</ViewRef_.prototype.detectChanges /@angular/core//bundles/core.umd.js:10804:58
ApplicationRef_</ApplicationRef_.prototype.tick/< /@angular/core//bundles/core.umd.js:10191:79
ApplicationRef_</ApplicationRef_.prototype.tick /@angular/core//bundles/core.umd.js:10191:17
ApplicationRef_/<.next/< /@angular/core//bundles/core.umd.js:10095:103
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke /zone.js/dist/zone.js:323:20
NgZoneImpl/this.inner<.onInvoke /@angular/core//bundles/core.umd.js:9245:36
Zone</ZoneDelegate</ZoneDelegate.prototype.invoke /zone.js/dist/zone.js:322:20
Zone</Zone</Zone.prototype.run /zone.js/dist/zone.js:216:25
NgZoneImpl</NgZoneImpl.prototype.runInner /@angular/core//bundles/core.umd.js:9276:64
NgZone</NgZone.prototype.run /@angular/core//bundles/core.umd.js:9505:55
ApplicationRef_/<.next /@angular/core//bundles/core.umd.js:10095:73
EventEmitter</EventEmitter.prototype.subscribe/schedulerFn< /@angular/core//bundles/core.umd.js:9168:58
SafeSubscriber.prototype.__tryOrUnsub /rxjs/Subscriber.js:225:13
SafeSubscriber.prototype.next /rxjs/Subscriber.js:174:17
Subscriber.prototype._next /rxjs/Subscriber.js:124:9
Subscriber.prototype.next /rxjs/Subscriber.js:88:13
Subject.prototype._finalNext /rxjs/Subject.js:128:13
Subject.prototype._next /rxjs/Subject.js:120:13
Subject.prototype.next /rxjs/Subject.js:77:9
EventEmitter</EventEmitter.prototype.emit /@angular/core//bundles/core.umd.js:9156:58
NgZone</NgZone.prototype._checkStable /@angular/core//bundles/core.umd.js:9415:25
NgZone/this._zoneImpl<.onLeave /@angular/core//bundles/core.umd.js:9387:21
NgZoneImpl/this.inner<.onInvokeTask /@angular/core//bundles/core.umd.js:9239:29
Zone</ZoneDelegate</ZoneDelegate.prototype.invokeTask /zone.js/dist/zone.js:355:24
Zone</Zone</Zone.prototype.runTask /zone.js/dist/zone.js:256:29
ZoneTask/this.invoke /zone.js/dist/zone.js:423:29

[RoxKilly]

A bit more info: the component that throws the errors is part of a module that is loaded lazily. If I add

this._iconRegistry.addSvgIconSet('src/icons/sprite.defs.svg');

To that component, the error doesn't occur. This suggests to me that even though I imported MdIconModule into my main AppModule and registered my icon set in AppComponent, when the other component is loaded lazily later, it does not have access to the original instance of MdIconModule.

I tried to add MdIconRegistry to the providers array of AppModule but that made no difference.

I expected a service provided in AppModule to be a singleton app-wide so I shouldn't have to register the icon set again. At this point, I don't know whether it's a problem with my code, a bug with Angular or a bug with Material.

PS: By the way, registering the icon set with each component that uses icons is no practical workaround: it means that every time the user navigates, ng-Material makes a new http request for the same icon file.

[RoxKilly]

I discovered another tidbit about this bug today.

• It only affects lazy-loaded modules. If all my content is loaded at app launch, there is no problem.
• If a template component (components loaded via their selector in templates) is part of an eagerly loaded module, <md-icon svgIcon=...> will work but only if the template component is being used within an eagerly loaded module. If I include that same component in a template that was lazy-loaded, the app will crash.

[RoxKilly]

Closing this. Refer to #1071

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