如何更改 Material 中的 mat-icon 大小

Question

這個問題來自 Material2 Github 回購。

我仍然無法設置包裝在自定義組件中的 Material 組件的樣式。

我有一個包含<md-icon svgIcon="logo"></md-icon>的<logo>組件

添加：

:host { 
   .mat-icon {
    width: 100px;
    height: 100px;
    font-size: 56px;
  }
}

不適用於我的自定義組件內的 Material 組件。

Answer 1

就我而言，這非常有效。 我使用最新的材料 (6.2.0)

CSS：

.icon {
    font-size: 36px;
}

HTML：

  <div class="icon">
    <mat-icon [inline]="true">done</mat-icon>
  </div>

主要是設置： [inline]="true"

從API ：

@Input() inline: boolean - 是否應內聯圖標，自動調整圖標大小以匹配包含圖標的元素的字體大小。

Answer 2

更新：2019-05-22

較新版本的 Material Design 可以選擇將[inline]="true"為 HTML 元素的屬性。

我建議改用這種方法。

<mat-icon svgIcon="thumbs-up" inline="true"></mat-icon>

使用這個時，圖標將從父容器繼承！

格魯夫！ :)

---

我一直對此有一些疑問，所以我只想更清楚地說明如何使用它...

/* 1. Add this mixin to a "global" scss */

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
  line-height: $size;
}

/* 2. Then use it like this in you component scss */

mat-icon {
  @include md-icon-size(32px);
}

示例用法

<mat-icon class="myIcon" svgIcon="search"></mat-icon>

:host {
  .myIcon {
    &mat-icon {
      @include md-icon-size(32px);
    }
  }
}

Answer 3

我正在使用

<mat-icon svgIcon="cellphone-link"></mat-icon>

和

.mat-icon {
    transform: scale(2);
}

用於調整 svg 元素的大小。 這是對我來說唯一可行的解​​決方案，其中 2 是實際大小的 200%（縮小到例如 0.5 也是可能的）。

設置“高度”和“寬度”對我來說是沒有選擇的，因為 mat-icon 組件的渲染 svg 元素目前沒有 viewBox 屬性。 但是 viewBox 屬性是強制性的，以使其與“高度”和“寬度”樣式一起使用。 也許 Angular Material 團隊將來會改進這一點。

附帶說明：您可以使用父包裝器將墊子圖標居中，然后

display: flex;
align-items: center;
justify-content: center;

Answer 4

編輯：請參閱已接受的答案！

像這樣使用它效果很好。

<md-icon svgIcon="arrow-down" class="size-16"></md-icon>

在主題 css 中定義它時（不在組件：host 中）

md-icon.size-16 {
  width: 16px;
  height: 16px;
  line-height: 16px;
}

Answer 5

要確保圖標在調整大小后在其內置容器內（在<mat-icon>組件內）保持居中，請使用此解決方案。 不需要包裝盒，也沒有inline=true財產。

HTML

<mat-icon class="big">error_outline</mat-icon>

CSS

.big {
  width: 2rem;
  height: 2rem;
  font-size: 2rem;
}

注意：您也可以使用其他單位，例如px或em

Answer 6

嘗試這個。

@mixin md-icon-size($size: 24px) {
  font-size: $size;
  height: $size;
  width: $size;
}

.material-icons.mat-icon {
  @include md-icon-size(32px);
}

Answer 7

我認為問題是由內聯沒有 viewBox 的 svg 引起的 - 阻止了所有調整大小的嘗試。

在我看來，另一種方法是直接使用 iconfont：

<i class="material-icons" style="font-size: 40px">face</i>

Answer 8

為我工作

HTML

  <button mat-fab>
    <mat-icon class="md-36" inline aria-label="Home button">
      home
    </mat-icon>
  </button>
  <button mat-fab>
    <mat-icon class="md-48" inline aria-label="Up button">
      expand_less
    </mat-icon>
  </button>

CSS

.material-icons.md-18 {
  margin-top: -3px;
  font-size: 18px;
}
.material-icons.md-24 {
  margin-top: -3px;
  font-size: 24px;
}
.material-icons.md-36 {
  margin-top: -3px;
  font-size: 36px;
}
.material-icons.md-48 {
  margin-top: -4px;
  font-size: 48px;
}

圖標正確居中，包裝 div 不會溢出晶圓廠/按鈕 我猜不太優雅

Answer 9

另一種可能的選擇是，如果您希望選擇將圖像縮放到最大字體大小（例如 300 像素），則以下 scss 循環將起作用；

@for $i from 1 through 300{
  .iconsize-#{$i}{
    font-size: $i+unquote('px') !important;
    height: $i+unquote('px') !important;
    width: $i+unquote('px') !important;
  };
}

如果您想設置在編譯的 CSS 中生成的最小尺寸，只需將上面的1更改為您想要的最小尺寸，同樣，要更改最大值，請將300更改為您想要的任何最大值。

這對於作為 SVG 的圖標特別方便，它們將縮放到您設置的大小（盡管我在讓第三方 SVG 圖標縮放以適應容器時遇到了一些麻煩，但這是一個不同的問題）。 如果您像我一樣，通常需要將大多數圖標（例如菜單圖標）設為特定大小，而某些圖標會更大（例如裝飾元素）。 此循環允許您以 1px 的增量輕松測試不同大小的字體，直到找到適合您的大小為止。

這有什么作用？

當你的 SCSS 被編譯成 CSS 時，它會輸出一個包含 1 到 300 的相關類的循環。

我如何使用它？

要使用，只需將.iconsize-[x]類添加到您的mat-icon ；

<mat-icon class="iconsize-45">show_chart</mat-icon>

此示例將圖標設置為 45px 寬度和高度。

Answer 10

最簡單的方法（沒有額外的 CSS），下面的工作正常

 <sup><mat-icon inline="true">info</mat-icon></sup> <small><mat-icon inline="true">info</mat-icon></small> <big><mat-icon inline="true">info</mat-icon></big>

請注意inline="true"使其繼承父標簽的樣式

Answer 11

使用 [ngStyle] 指令的替代解決方案。

當你只想覆蓋一次mat-icon的大小而不制作樣式表時，你也可以使用mat-icon組件上的ngStyle指令輕松地做到這一點，如下所示：

<mat-icon [ngStyle]="{ 'width.px': 64, 'width.px': 64 'font-size.px': 64 }">build</mat-icon>

或者在組件中定義大小時：

this.size = 64;

然后：

<mat-icon [ngStyle]="{ 'width.px': size, 'width.px': size 'font-size.px': size }">build</mat-icon>

該解決方案之所以有效，是因為您直接在mat-icon主機組件上添加了內聯樣式。

將上述解決方案包裝到自定義指令中。

如果你想在你的應用程序中多次重用大小調整，上面提到的解決方案可以很容易地包裝到一個指令中：

import { Directive, HostBinding, Input, OnInit } from '@angular/core';

@Directive({
  selector: '[appIconSize]',
})
export class IconSizeDirective {

  @HostBinding('style.width') @HostBinding('style.height') @HostBinding('style.font-size') @Input('appIconSize') public size: string;
    
}

然后：

<mat-icon appIconSize="64px">build</mat-icon>

---

在以下 StackBlitz 中檢查這兩種解決方案的工作示例。

Answer 12

我正在使用 Angular 和材料版本 13.3.9。

在我的例子中，按鈕和圖標都需要 css：

 .add-button-container { display: flex; justify-content: center; align-items: center; height: 30px; width: 30px; }.mat-icon { height: 30px; width: 30px; display: flex; align-items: center; justify-content: center; }

 <button mat-mini-fab class="add-button-container" color="primary" aria-label="icon button with an add icon"> <mat-icon>add</mat-icon> </button>