更改mat-icon按钮的大小

Question

如何更改mat-icon-button大小？我的图标现在有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

在您的组件 scss 文件中（假设 sass）：

.mat-icon-button.large {

    width: 48px;
    height: 48px;
    line-height: 48px;

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

您可以将按钮和图标更改为您想要的任何大小。如果它们都设置为 48，则图标周围将没有任何间距。您可能希望将按钮大小增加到 64 之类的大小。

在你的 html 中：

<button mat-icon-button class="large"><mat-icon>chat</mat-icon></button>

Answer 2

使用 Angular 8，调整大小对我有用：

.small-icon-button {
   width: 24px !important;
   height: 24px !important;
   line-height: 24px !important;

   .mat-icon {
      width: 16px !important;
      height: 16px !important;
      line-height: 16px !important;
   }
   .material-icons {
      font-size: 16px !important;
   }
}

不需要::ng-deep。

Answer 3

使用:: ng-deep设置mat-icon的字体大小,以便在主机深处达到该类.!重要还需要覆盖它.宽度和高度也应设置为和谐调整背景大小.

这应该工作(我改为md-到mat-为最新的AM版本):

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:

类:

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

@Component({
  encapsulation: ViewEncapsulation.None
})

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

CSS:

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

和演示

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

styles.css的

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

演示

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

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>

演示

Answer 4

许多答案不必要地复杂......这是使用Angular 9对我有用的方法：

假设您希望图标为 40x40：

HTML :

<button mat-icon-button>
    <mat-icon id="add">add</mat-icon>
</button>

CSS :

.mat-icon {
    height: 40px;
    width: 40px;
    font-size: 40px;
    line-height: 40px; // DO NOT FORGET IT !
}

不需要ng-deep或!important。