更改垫子图标按钮的大小 [英] Change size of mat-icon-button
本文介绍了更改垫子图标按钮的大小的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
如何更改Mat-icon-Button的大小?我的图标现在有24px,我想将该值增加到48px.我使用mat-icon作为按钮内容.我还注意到,mat-icon-button刚编码为40px/40px大小.
How can I change mat-icon-button size? My icon has 24px now and I would like to increase that value to 48px. I use mat-icon as a button content. I also noticed that mat-icon-button has just hardcoded 40px/40px size.
<button mat-icon-button color="primary">
<mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>
推荐答案
使用两个选项之一覆盖mat-icon的字体大小. (我将md-更改为mat-以获取最新的AM版本)
Override the font size of mat-icon using either of the options. (I changed md- to mat- for the newest AM version)
::ng-deep
可以深入到主机中的该类.宽度和高度也应设置为按比例调整背景大小.
::ng-deep
to reach that class deep in the host. The width and the height should be also set to adjust the backdrop size proportionally.
HTML:
<button mat-button>
<mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>
CSS
::ng-deep .mat-icon{
height:48px !important;
width:48px !important;
font-size:48px !important;
}
查看演示
或者,如果您避免使用
::ng-deep
,请使用ViewEncapsulation.None
(但要谨慎使用):
Or, if you avoid
::ng-deep
, use ViewEncapsulation.None
(but use sparingly):
班级:
import {ViewEncapsulation} from '@angular/core';
@Component({
encapsulation: ViewEncapsulation.None
})
然后,您可以直接从组件样式表中进行样式设置.
Then you can style directly from the component stylesheet.
CSS:
.mat-icon{
height:48px !important;
width:48px !important;
font-size:48px !important;
}
或从主样式表styles.css中对其进行样式设置:
Or style it from the main stylesheet, styles.css:
styles.css
.mat-icon{
height:48px !important;
width:48px !important;
font-size:48px !important;
}
最后但并非最不重要的解决方案,可以内联进行样式:
And last, but not the least solution, styling can be done inline:
HTML:
<button mat-button>
<mat-icon style="
height:48px !important;
width:48px !important;
font-size:48px !important;" class="material-icons">play_circle_filled</mat-icon>
</button>
这篇关于更改垫子图标按钮的大小的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文