Icon is not rendered with IE11

[xtreye]

I'm submitting a...

[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report  
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:

Current behavior

With IE11, it fails to render an icon. The following gets to JS console:
TypeError: Argument not optional

Investigation shows that this happens because this.element.classList is not supported for SVGs in IE11.

Expected behavior

Should render the icon, without an error message

Minimal reproduction of the problem with instructions

Standard <svg-icon key="settings"></svg-icon> is enough to reporduce with IE11

What is the motivation / use case for changing the behavior?

IE11 is still a standard browser for many corporate users

Environment

Angular version: 9.1.8


Browser:
- [ ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [X] IE version 11
- [ ] Edge version XX
 

[NetanelBasal]

Add the polyfill provided by Angular CLI in polyfill.ts

• BROWSER POLYFILLS
  */

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import 'classlist.js'; // Run npm install --save classlist.js.

[xtreye]

Sorry, that didn't work neither for my project nor for the library demos - that's why I raised the ticket. I believe you checked this, so the problem is on my side. Thanks

[RonnieRocket147]

Hello @xtreye, did you manage to solve this issue? I have the same problem, SVG icons are not rendered on IE11 with TypeError: Argument not optional errors. I have the mentioned polyfill enabled but this does not resolve the issue unfortunately.

[xtreye]

Hey @RonnieRocket147 nope, just avoiding SVG functionality so far. Would be great to see if this works for real.

[RonnieRocket147]

Check out this solution I found yesterday: #16 (comment)