使用vanilla CSS或HTML更改Angular Material 2 <mat-icon>中的SVG大小

Question

如何使用vanilla CSS,HTML或JS更改Angular 2+ Material Design上SVG图标的大小？

如果我在HTML元素中指定图标,样式工作正常:

<mat-icon style="font-size: 16px !important">home</mat-icon>

但是,当我使用该svgIcon属性时(例如,如果使用第三方图标库),则无法调整图标大小:

<mat-icon style="font-size: 16px !important" svgIcon="home"></mat-icon>

我知道SVG的扩展比较复杂,我可以使用该viewBox属性.但是,我甚至无法访问<svg>里面的子元素<mat-icon>做一个丑陋的JS hack.使用vanilla CSS有一种直接的方式吗？甚至是Angular组件的丑陋黑客？

额外信息:我正在使用https://materialdesignicons.com上的mdi.svg图标库来获取我的Angular项目的其他图标.但是,要使用这些,我必须使用该属性.svgIcon

Answer 1

看起来库样式会覆盖你的css内联声明.尝试!important为您的样式添加声明:style="font-size: 16 !important"或者由于您没有提供更多代码,请尝试检查此图标节点,以检查定义字体大小的样式.

另请查看此处

更新:

这是另一个可行的解决方案.transform: scale(2);为要调整大小的svg元素添加样式,其中2是实际大小的200%(当然,您也可以使用例如0.5值50%来缩小它们的大小).这是网站的工作示例,其中包含您的图标和documnetation链接:

.size-24 button svg {
    width: 24px;
    height: 24px;
    transform: scale(2);
}