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

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

这应该可行（我将md-更改为最新的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;
}

查看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：

设置样式

<强> styles.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

Answer 2

许多答案不必要地复杂...以下是使用 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。

Answer 3

使用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 4

我在 angular 12 中使用这个 scss 样式：

$sizes: [17, 20, 25, 35, 40];
@each $size in $sizes {
  button.mat-icon-button {
    &[size="#{$size}"] {
      line-height: initial;
      min-width: auto;
      height: #{$size}px;
      width: #{$size}px;
      .mat-button-wrapper {
        line-height: initial;
        mat-icon {
          height: auto;
          width: auto;
          line-height: initial;
          font-size: #{$size * .7}px;
        }
      }
    }
  }
}

它不适用于小于 17 的尺寸，但我认为您不需要这个。希望能帮到你 :)

Answer 5

这是一个使用styles.scss中定义的scss解决所有封装问题的示例（在自定义主题中定义它也可以做到这一点）。避免使用！important 。

这里是Stackblitz。

html

<h3>Normal button</h3>
<button mat-icon-button color="warn" aria-label="normal button">
    <mat-icon>cloud_upload</mat-icon>
  </button>

<h3>Large Button</h3>
<button mat-icon-button color="warn" class="icon-button-large" aria-label="small button">
    <mat-icon>cloud_upload</mat-icon>
  </button>

<h3>small button</h3>
<button mat-icon-button color="warn" class="icon-button-small" aria-label="large icon">
    <mat-icon>cloud_upload</mat-icon>
</button>

style.scss

button[mat-icon-button]{
$large-size-button: 80px;
$large-size-icon: 48px;

    &.icon-button-large {
      width: $large-size-button;
      height: $large-size-button;
      line-height: $large-size-button;
    .mat-icon {
      font-size: $large-size-icon;
      width: $large-size-icon;
      height: $large-size-icon;
      line-height: $large-size-icon;
    }
    .mat-button-ripple {
      font-size: inherit;
      width: inherit;
      height: inherit;
      line-height: inherit;
    }
  }

  $small-size-button: 24px;
  $small-size-icon: 18px;

    &.icon-button-small {
      width: $small-size-button;
      height: $small-size-button;
      line-height: $small-size-button;
    .mat-icon {
      font-size: $small-size-icon;
      width: $small-size-icon;
      height: $small-size-icon;
      line-height: $small-size-icon;
    }
    .mat-button-ripple {
      font-size: inherit;
      width: inherit;
      height: inherit;
      line-height: inherit;
    }
  }
}

Answer 6

在Angular 9中完美工作：

<button mat-mini-fab>
  <mat-icon>search</mat-icon>
</button>

docs：https://material.angular.io/components/button/examples

Answer 7

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

Relax

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

在您的html中：

.mat-icon-button.large {

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

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

Answer 8

 <button md-mini-fab (click)="add()" 
style="cursor: pointer;textdecoration:none;height:30px;width:30px">                                               
<md-icon style="margin:-4px 1px;color:white;font-size: 16px;">add</md-icon>
</button>

以上代码可在angular2中完美运行

Answer 9

我知道这个问题是在不久前发布的，但是我喜欢使用zoom CSS属性，因为它是一种非常简单，优雅的解决方案，并且避免了一些警告。

确保选择器的特异性足以覆盖Angular Material的样式。这有助于避免使用通常不被接受的!important覆盖。

button[mat-icon-button].mat-icon-button.large-icon-button {
  zoom: 1.5;  // NOTE: You may need to adjust this value to achieve exactly 48px.
}

更改mat-icon按钮的大小

9 个答案: