更改垫子图标按钮的大小答案

【问题标题】：Change size of mat-icon-button更改垫子图标按钮的大小
【发布时间】：2017-10-02 18:44:51
【问题描述】：

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

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

【问题讨论】：

标签： angular angular-material

【解决方案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

或者从主样式表 style.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

【讨论】：

这个演示不起作用。只需单击演示中的按钮，您就会看到问题所在。
::ng-deep .mat-icon 规则对我有用，但我还必须添加 line-height: 48px !important; 来修复垂直对齐
如果我的组件中有多个按钮，这很糟糕。如果在特定按钮上有一个覆盖尺寸的示例，那就太好了。
@Iostranslation，最后一个示例是针对特定按钮的。对于其他版本，我想您可以在特定按钮上添加一个类或一个 id，并在 css 中添加该引用。这会有帮助吗？
还有一种方法是使用::nth-of-type() 加上按钮的编号。效果很好。如果有帮助，我可以更新答案

【解决方案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。

【讨论】：

这是唯一真正有效且不会破坏按钮内图标布局的答案。

【解决方案3】：

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

【讨论】：

此答案有效，但不能很好地扩展，不适用于 64。默认情况下，图标和按钮之间有填充，对于 64 使用此答案没有填充。

【解决方案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。

【讨论】：

这恰好适用于 40，但不适用于更多。这并不理想。
这很好地减小了图标的大小，但没有减小周围按钮的大小，这意味着没有增加空间。

【解决方案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;
    }
  }
}

【讨论】：

最佳答案。处理图标、填充、按钮、波纹。不需要::ng-deep。恭维

【解决方案6】：

我在 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 的尺寸，但我认为您不需要它。希望对你有帮助:)

【讨论】：

【解决方案7】：

在 Angular 9 中完美运行：

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

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

【讨论】：

【解决方案8】：

我知道这个问题是不久前发布的，但我喜欢使用 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.
}

【讨论】：

【解决方案9】：

  <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 中完美运行

【讨论】：