角垫-图标缩放自己的svg

Question

我试图在一个按钮上插入一个垫子，它是用户定义的组件的一部分。

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

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

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

但是当我打开我的页面时，它看起来是这样的：错尺寸

它应该是詹金斯标志(http://jenkins.io)作为svg-图形.但是如果我改变字体大小，图片的大小就不会改变。我只看到其中的一小部分。

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

谢谢

Answer 1

如果有人感兴趣的话。

G. Tranter的解决方案可能是对的，但在这里行不通。

我的图标不是方形的。我调整了一下，一切都很好。

Answer 2

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

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

您可能需要添加!important修饰符(记不清)。

Answer 3

我成功地将SVG材料图标重新包装的唯一方法是使用"transform: scale(x)“方法。它似乎没有改变SVG基于CSS属性或容器大小的viewbox大小。