svgIcon with bound expression in contents fails for IE 11

[isaacplmann]

Bug, feature request, or proposal:

<md-icon [svgIcon]="myIcon">{{myIcon}}</md-icon>

This fails in IE 11 if the md-icon component is hidden and shown. Removing {{myIcon}} from the template avoids the error.

What is the expected behavior?

No error is shown in the console. The icon is not duplicated.

What is the current behavior?

An error appears in the console and the icon is duplicated.

Error from the console

ERROR Error: Invalid argument.
   "ERROR"
   {
      [functions]: ,
      __proto__: { },
      description: "Invalid argument.",
      message: "Invalid argument.",
      name: "Error",
      ngDebugContext: { },
      number: -2147024809,
      stack: "Error: Invalid argument.
   at DefaultDomRenderer2.prototype.setValue (eval code:2940:71)
   at BaseAnimationRenderer.prototype.setValue (eval code:513:73)
   at DebugRenderer2.prototype.setValue (eval code:13793:66)
   at checkAndUpdateTextInline (eval code:11867:9)
   at checkAndUpdateNodeInline (eval code:12358:13)
   at checkAndUpdateNode (eval code:12301:9)
   at debugCheckAndUpdateNode (eval code:13162:5)
   at debugCheckRenderNodeFn (eval code:13141:13)
   at Anonymous function (Function code:17:5)
   at debugUpdateRenderer (eval code:13126:5)
   at checkAndUpdateView (eval code:12273:5)
   at callViewAction (eval code:12633:21)
   at execEmbeddedViewsAction (eval code:12591:17)
   at checkAndUpdateView (eval code:12269:5)
   at callViewAction (eval code:12633:21)",
      Symbol(rxSubscriber)_m.ix4mqv1tfg5: undefined
   }

What are the steps to reproduce?

http://plnkr.co/edit/IxGqqudBSwWHompYGZtD?p=preview

1. Browse to plunker using IE 11.
2. Open console in developer tools
3. Toggle slider off
4. Toggle slider on

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

I wanted to fall back to having the name of the icon appear on the screen if the svg doesn't load over the network. This works great in other browsers, but fails for IE 11.

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

Angular 4.3.1, Material 2.0.0-beta.8, IE 11

Is there anything else we should know?

The error happens in DefaultDomRenderer2:

node.nodeValue = value

Because you're setting innerHtml here as a workaround for this issue

...which runs straight into the situation discussed here. Namely, setting innerHtml on a parent node and then trying to update the nodeValue of a removed node fails silently in modern browsers, but IE 11 throws an error.

[isaacplmann]

Thanks!

…

On Aug 2, 2017 7:14 PM, "tinayuangao" ***@***.***> wrote: Closed #6093 <#6093> via #6102 <#6102>. — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub <#6093 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AA0lQEKyTpKXwmeCbPhxkRjzHEUKSfKgks5sUQLzgaJpZM4OlqfX> .

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