角垫图标缩放自己的svg答案

【问题标题】：Angular mat-icon scaling own svg角垫图标缩放自己的svg
【发布时间】：2019-03-30 00:28:49
【问题描述】：

我正在尝试将 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-logo (http://jenkins.io) 作为 svg 图形。但是如果我改变字体大小，图片的大小不会改变。我看到的只是其中的一小部分。

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

谢谢

【问题讨论】：

【解决方案1】：

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

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

您可能需要添加!important 修饰符（不记得了）。

【讨论】：

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

如果有人感兴趣。

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

我的图标不是方形的。我对其进行了缩放，一切正常。

【讨论】：