material2：适当改变 mat-mini-fab 尺寸和图标尺寸

Question

抱歉，如果我重复了一个问题 - 没有找到有关我的问题的任何信息。

我正在使用angular 6 with material design。我需要更改其中的按钮mat-fab-mini和图标的大小。在检查工具 html 中以这种方式呈现：

要更改大小，我使用了以下代码，但它不会使按钮内的图标尺寸变小：

html

<button mat-mini-fab class="my-fab">
    <mat-icon aria-label="favorite">favorite</mat-icon>
</button>

scss

.my-fab {
    width: 20px;
    height: 20px;
    line-height: 16px;

    .mat-button-wrapper {
         padding: 2px 0 !important;
         line-height: 16px !important;
         width: 16px !important;
         height: 16px !important;

         .mat-icon {
              font-size: 16px;
              padding-right: 4px;
              line-height: 16px;
          }
    }
}

这是结果：

的属性.mat-button-wrapper根本没有改变。图标在按钮的底部，图标的大小没有改变。如何更改 material2 处图标的大小以避免它？

Answer 1

好的，我找到了解决方案。在角度材料 2 组件中更改继承属性真的很难。要在我的情况下做到这一点，我应该按照这里的回答做（已经加上：D）

因此，在我的代码中，我对 scss 进行了以下更改：

.my-fab {
     width: 20px;
     height: 20px;
     line-height: 14px;
     font-size: 14px;

     &::ng-deep .mat-button-wrapper{
         line-height: 14px;
         padding: 0;

          .mat-icon {
              font-size: 14px;
              padding-right: 4px;
              padding-top: 4px;
          }
    }
}

现在一切看起来都很棒。如果您知道更好和正确的方法来更改其中的大小mat-fab-mini和图标 - 请在此处回答，如果有效，我会将其标记为正确答案。否则我会在 2 天后将我的答案标记为正确。

Answer 2

快捷方便 ：）

<button mat-mini-fab color="primary" [ngStyle]="{transform: 'scale(0.8)'
              }">
   <mat-icon>cloud_download</mat-icon>
</button>

Answer 3

我这样成功了：

html

<button mat-mini-fab color="basic" class="button24">
  <mat-icon class="icon24">attach_file</mat-icon>
</button>

CSS

.button24 {
  background-color: #eee;
  width: 24px;
  height: 24px;
}
.icon24 {
  font-size: 16px;
  margin-top: -8px;
}

摩根大通

Answer 4

您可以尝试缩放 mat-mini-button，而不会弄乱字体和位置。请参阅下面的示例。

超文本标记语言

<button mat-mini-fab>
    <mat-icon>favorite</mat-icon>
</button>

CSS

button[mat-mini-fab] {
 transform: scale(0.7) !important;
}