抱歉,如果我重复了一个问题 - 没有找到关于我的问题的任何信息。
我正在使用 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 的图标大小来避免它?
最佳答案
好的,我找到了解决方案。改变 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 天后将我的答案标记为正确。
关于angular - Material 2 : properly changing of mat-mini-fab size and icon size,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51153996/