Question

我正在尝试将Mat-con插入按钮，这是用户定义的组件的一部分。

`<button mat-button>
  <mat-icon svgIcon="jenkins" class="material-icons md-10"></mat-icon>  
  Jenkins
</button>`

我组件的CSS文件如下所示：

.material-icons.md-10 { font-size: 10px; }

但是当我打开页面时，它看起来像这样： Wrong size

它应该是jenkins徽标（http://jenkins.io）作为svg图形。但是，如果我更改字体大小，则图片的大小不会改变。我唯一看到的只是其中的一小部分。

如何调整图标的大小或缩放它？

谢谢

Answer 1

除字体大小外，尝试更改图标的宽度和高度和/或行高：

!important

您可能需要添加select sum(a.shares*a.cps) - sum(b.shares*b.cps) from (select * from transactions where usr = 1 and type = "C" or type = "S") as a union (select * from transactions where usr = 1 and type = "W" or type = "B") as b修饰符（不记得了）。

Answer 2

如果有人感兴趣。

G。Tranter的解决方案可能是正确的，但在这里不起作用。

我的图标不是方形的。我将其缩放，一切正常。

Answer 3

我可以成功调整SVG材质图标大小的唯一方法是使用“ transform：scale（x）”方法。似乎角度并没有根据CSS属性或容器大小更改SVG的视图框大小。

Answer 4

使用自定义svg图标时，您需要使用height属性来更改图标大小。

.material-icons.md-10 {
     height: 10px;
 }

角度Mat-icon缩放自己的SVG

4 个答案: