使用其中一个选项覆盖mat-icon的字体大小。（我将md-改为mat-，用于最新的AM版本）
对于"Angular 材料8 +"（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

带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。

Angular 15+更新：

对于新的MDC组件，它稍有不同。您也可以检查我的指令是否具有不同的图标按钮大小。https://github.com/btxtiger/mat-icon-button-sizes

.small-icon-button {
   width: 24px !important;
   height: 24px !important;
   padding: 0px !important;
   display: inline-flex !important;
   align-items: center;
   justify-content: center;

   & > *[role=img] {
      width: 16px;
      height: 16px;
      font-size: 16px;

      svg {
         width: 16px;
         height: 16px;
      }
   }

   .mat-mdc-button-touch-target {
      width: 24px !important;
      height: 24px !important;
   }
}

在组件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>

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

下面是一个使用styles.scss中定义的scss来解决任何封装问题的示例（在自定义主题中定义它也会起到同样的作用）。
下面是它的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>

样式.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;
    }
  }
}

我使用这个scss风格在角12：

$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号的尺寸，但我不认为你会需要这个。希望它能帮助你：）

我知道这个问题是不久前提出的，但我喜欢使用zoom CSS属性，因为它是一个非常简单和优雅的解决方案，并避免了几个警告。
确保选择器的特殊性足以覆盖角材质的样式。这有助于避免使用!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.
}

在Angular 9中完美工作：

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

文件：https://material.angular.io/components/button/examples

<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中运行良好