Angular 更改mat图标按钮的大小

如何更改垫子图标按钮的大小？我的图标现在有24px，我想把这个值增加到48px。我使用mat图标作为按钮内容。我还注意到mat图标按钮刚刚硬编码了40px/40px大小

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

打圈

使用任一选项覆盖mat图标的字体大小。 （对于最新的AM版本，我将md改为mat）

---

对于角材质8+，在组件样式表中添加以下内容：

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

---

对于以前的版本，请添加：：ng deep以深入主机中的类。宽度和高度也应设置为按比例调整背景大小。 HTML:

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

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

@Component({
  encapsulation: ViewEncapsulation.None
})

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

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

查看

---

或者，如果您避免使用“：：ng deep”，请使用“ViewEncapsulation.None”（但要谨慎使用）： 类别：

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

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

@Component({
  encapsulation: ViewEncapsulation.None
})

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

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

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

CSS:

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

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

@Component({
  encapsulation: ViewEncapsulation.None
})

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

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

---

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

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

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

---

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

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

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

@Component({
  encapsulation: ViewEncapsulation.None
})

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

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

打圈

---

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

您可以更改按钮和图标的大小。如果两者都设置为48，则图标周围将没有任何间距。您可能希望将按钮大小增加到64左右

在html中：

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

聊天

添加

---

上面的代码在angular2和Angular8中工作得很好，在以下情况下调整大小对我很有效：

。小图标按钮{
宽度：24px！重要；
高度：24px！重要；
线高：24px！重要；
.mat图标{
宽度：16px！重要；
高度：16px！重要；
线高：16px！重要；
}
.材质图标{
字体大小：16px！重要；
}
}

---

否

：：ng deep

必需。

下面是一个示例，使用styles.scs中定义的scs来解决任何封装问题（在自定义主题中定义它也会解决同样的问题）。为了避免使用，增加了特异性级别！重要信息

这是它的基本原理

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>

---

在角度9中完美工作：

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

搜索

---

文档：

我知道这个问题不久前就发布了，但是我喜欢使用

zoom

CSS属性，因为它是一个非常简单和优雅的解决方案，并且避免了一些警告

确保选择器的特定性足以覆盖角度材质的样式。这有助于避免使用

！重要信息

覆盖，这通常是不受欢迎的

按钮[mat图标按钮].mat-icon-button.large-icon-button{
zoom:1.5；//注意：您可能需要调整此值以精确达到48px。
}

许多答案不必要地复杂。。。以下是使用Angular 9对我有效的方法：

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

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

假设您希望图标为40x40：

HTML：

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

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

---

无需

ng deep

或

！重要信息

我在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号的尺码，它不起作用，但我认为您不需要这个。

---

希望它能帮助您：）

此演示不起作用。只需单击演示中的按钮，您就会看到问题所在。

：ng deep.mat图标

规则对我有效，但我还必须添加

行高：48px！重要的修复垂直对齐如果我的组件中有多个按钮，这会很糟糕。最好有一个覆盖特定按钮上的维度的示例。@最后一个示例是针对特定按钮的。对于其他版本，我想您可以在特定按钮上添加类或id，并在css中添加该引用。这会有帮助吗？还有一种方法可以将：：nth-of-type（）与按钮的编号一起使用。效果很好。如果有帮助，我可以更新答案