angular - Material 2 : properly changing of mat-mini-fab size and icon size

Question

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

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

为了改变大小，我使用了下面的代码，但它并没有使按钮内的图标变小:

html

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

跨界

.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

好的，我找到了解决方案。改变 Angular Material 2 组件中的继承属性真的很难。要在我的情况下做到这一点，我应该按照回答做 here (already plused :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 天后将我的答案标记为正确。