如何更改 Angular Material 上墊子圖標的大小？ [復制]

Question

這個問題在這里已經有了答案：

如何更改 Material 中的 mat-icon 大小（9 個回答）

去年關閉。

Angular Material 的 mat-icon 標簽的默認大小始終為 24px。 那么如何改變它......？

.mat-icon {
background-repeat: no-repeat;
display: inline-block;
fill: currentColor;
height: 24px;
width: 24px;
}

Answer 1

字體大小往往會弄亂位置。 我做這樣的事情：

<mat-icon class="icon-display">home</mat-icon>

CSS：

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

其中 2 實際上可以是任何數字。 2 原尺寸翻倍。

Answer 2

由於 Angular Material 使用 ' Material Icons ' Font-Family，圖標大小取決於font-size 。

因此，如果您想修改圖標的大小，那么您可以在 CSS 文件中更改其字體大小。

例如，

.mat-icon {
  font-size: 50px;
}

Answer 3

除了設置字體大小之外，為了正確包裹字體，您還需要調整高度和寬度

如果你想在全球范圍內做到這一點：

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

如果您只想將大小應用於某些圖標

.customIconSize {
    font-size: 50px;
    height: 50px ;
    width: 50px ;
}

在你的 HTML 模板中

<button mat-icon-button>
    <mat-icon class="customIconSize">visibility</mat-icon>
</button>

Answer 4

您還應該更改寬度和高度，以便容器與字體大小匹配。

根據您的用例，mat-icon 的一個很好的功能是 [inline] 的 bool 輸入，將其設置為 true，它將自動調整大小到它所包含的元素。

Answer 5

創建與實際函數匹配的類名。 它變得更容易記住、使用和擴展它。

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

.icon-3x {
    transform: scale(3);
}

Answer 6

“字體大小”方法僅適用於常規（基於字體）大小調整。 因此，它不適用於 svg 圖標，到目前為止，調整大小對我來說真正有效的唯一方法是放大/縮小它。

Answer 7

首先嘗試使用：

.mat-icon{
    font-size: 10px;
}

如果不能，請嘗試以下方法：

.mat-icon {
    width: 10px;
}

祝你好運 ！！！

Answer 8

要更改整個項目的mat-icon字體大小，我創建了一個icon.css文件並將其添加到angular.json

icon.css內容：

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialicons/v47/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 18px; // Changing font-size for whole project
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

在angular.json將icon.css文件添加到build的樣式：

...

"build": {
    "builder": "@angular-devkit/build-angular:browser",
    "options": {
    ...,
    "styles": [
        {
        "input": "src/assets/app-theme.scss -- if any"
        },
        "src/styles.scss -- if any",
        "src/assets/angular-material/icon.css"

...

注意：根據您的項目包括樣式表