Components: matIcon svg icon width/height styles no longer work

[epelc]

What is the expected behavior?

Setting width/height css styles on a mat-icon element via a class or some other method doesn't expand the size of the underlying svg path. This use to work pre version 7.2 or 7 ish.

What is the current behavior?

The svg element and mat-icon element have larger size/box area but the path within the svg is no longer filling the box.

What are the steps to reproduce?

Providing a StackBlitz reproduction is the best way to share your issue.

StackBlitz starter: https://goo.gl/wwnhMV

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

7+ confirmed on 7.2 to be broken. Use to work in 6.4.1

Is there anything else we should know?

[crisbeto]

Looking back through all the changes until v6, I couldn't find anything that would've changed this behavior. Also looking at the docs in v6 (https://v6.material.angular.io/components/icon/examples), it seems to behave in the same way. The path doesn't scale, because the svg element doesn't have a viewBox. E.g. you can get it to scale by setting viewBox="0 0 24 24". You should be able to fix it by making sure that your source SVG has a viewBox.

[epelc]

@crisbeto Thanks for figuring this out!

Turns out part of our build process uses gulp-svgmin which in turn uses svgo to minify svg files before we bundle them together into icon sets. Anyways I think they added a plugin for removeViewBox which automatically was removing the viewbox on newer versions. I disabled this and it's all working I'm pretty sure this came up because I did a full dep upgrade when we went from v6 to v7. Thank for this very much! Saved the day

[angular-automatic-lock-bot[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._}