更改 mat-icon-button 的大小 [英] Change size of mat-icon-button

问题描述

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

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

解决方案

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

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

.mat-icon{高度:48px！重要；宽度:48px！重要；字体大小:48px ！重要；}

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

HTML:

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

CSS

::ng-deep .mat-icon{高度:48px！重要；宽度:48px！重要；字体大小:48px ！重要；}

查看演示

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

班级:

import {ViewEncapsulation} from '@angular/core';@成分({封装:ViewEncapsulation.None})

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

CSS:

.mat-icon{高度:48px！重要；宽度:48px！重要；字体大小:48px ！重要；}

演示

<小时>或者从主样式表styles.css中设置样式:

styles.css

.mat-icon{高度:48px！重要；宽度:48px！重要；字体大小:48px ！重要；}

演示

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

HTML:

<mat-icon style="高度:48px！重要；宽度:48px！重要；font-size:48px !important;"class="material-icons">play_circle_filled</mat-icon>

演示

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>

解决方案

Override the font size of mat-icon using either of the options. (I changed md- to mat- for the newest AM version)

---

For Angular Material 8+, add the following in the components stylesheet:

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

Demo

---

For previous versions, add ::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;
}

Check out the Demo

---

Or, if you avoid `::ng-deep`, use `ViewEncapsulation.None` (but use sparingly):

Class:

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

Demo

---

Or style it from the main stylesheet, styles.css:

styles.css

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

Demo

---

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>

Demo

这篇关于更改 mat-icon-button 的大小的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！