Icons are not rendered correctly from icon sets with svg sprites

[hodossy]

Reproduction

https://stackblitz.com/edit/angular-gbzhv4

Steps to reproduce:

1. Create an SVG sprite with symbol element with viewBox
2. Register the icon set with MatIconRegistry
3. Use the icon with mat-icon and svgIcon

For me the stackblitz link is not working, but if you download the project, then you can check the issue with npm install & ng serve.

Expected Behavior

SVG correctly rendered.

Actual Behavior

The SVG element is correctly placed inside the DOM, but the icon is not visible.

Probable root cause

If the viewbox is large enough, only the top left 24x24 pixels are shown on the screen. This is because the viewBox attribute is not copied from the symbol element. Manually adding it to the svg element in DevTools fixes the error.

Environment

• Angular: 8.2.4
• CDK/Material: 8.1.4
• Browser(s): Chrome Version 76.0.3809.132
• Operating System (e.g. Windows, macOS, Ubuntu): Windows 10 (Version 1809 Build 17763.678)

[crisbeto]

#16896 will fix the viewBox not being added.

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