javascript - 更改 mat-icon-button 的大小

Question

如何更改垫子图标按钮的大小？我的图标现在有 24px，我想将该值增加到 48px。我使用 mat-icon 作为按钮内容。我还注意到 mat-icon-button 硬编码了 40px/40px 大小。

<button mat-icon-button color="primary">
    <mat-icon class="material-icons">play_circle_filled</mat-icon>
</button>

Answer 1

使用任一选项覆盖 mat-icon 的字体大小。(我将 md- 更改为 mat- 以获得最新的 AM 版本)

---

对于 Angular Material 8+，在组件样式表中添加以下内容:

.mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Demo

---

对于以前的版本，添加::ng-deep 以到达主机深处的那个类。还应设置宽度和高度以按比例调整背景大小。

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;
}

查看 Demo

---

或者，如果您避免使用 `::ng-deep`，请使用 `ViewEncapsulation.None`(但要谨慎使用):

类:

import {ViewEncapsulation} from '@angular/core';

@Component({
  encapsulation: ViewEncapsulation.None
})

然后您可以直接从组件样式表中设置样式。

CSS:

.mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Demo

---

或者从主样式表 styles.css 中设置样式:

样式.css

.mat-icon{
    height:48px !important;
    width:48px !important;
    font-size:48px !important;
}

Demo

---

最后但并非最不重要的解决方案是，样式可以内联完成:

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>

Demo