How do I change the size of an SVG icon on Angular 2+ Material Design using vanilla CSS, HTML, or JS?
If I specify the icon inside the HTML element, styling works fine:
<mat-icon style="font-size: 16px !important">home</mat-icon>
However, when I use the svgIcon
attribute (for instance, if using a third-party icon library), the icon cannot be resized:
<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>
I am aware that SVGs are more complicated to scale, and I could use the viewBox
attribute. However, I cannot even access the <svg>
child element inside <mat-icon>
to do an ugly JS hack. Is there a straightforward way of doing it with vanilla CSS? Or even an ugly hack on the Angular component?
Extra info: I am using the mdi.svg
icon library from https://materialdesignicons.com to get additional icons for my Angular project. To use these, however, I must use the svgIcon
attribute.
Best Answer
It seems that library styles override your css inline declaration. Try maybe to add
!important
declaration to your style:style="font-size: 16 !important"
or since you didn't provide more code, try to inspect this icon node, to check which style define the font-size.Also check here
UPDATE:
Here is another possibly working solution. Add
transform: scale(2);
style for svg element you want to resize, where 2 is 200% of actual size (of course you can also downsize them using for example 0.5 value for 50%). Here is working sample for the website with your icons and link to documnetation: