javascript - 如何在 Angular Material 中改變 mat-icon 的大小？

Angular Material 的 mat-icon 標籤預設大小總是 24px。那么如何更改它呢...???

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

答案＃1

字體大小往往會影響位置。我會這樣做：

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

CSS ：

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

其中的 2 實際上可以是任何數字。2 將原始大小加倍。

答案＃2

由於 Angular Material 使用 'Material Icons' 字體系列，圖示大小取決於 font-size。

因此，如果你想修改圖示的大小，你可以在你的 CSS 檔案中更改其 font-size。

例如，

為了課堂：

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

標籤：

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

答案＃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>

答案＃4

建立與實際功能相符的類別名稱。這樣會更容易記住、使用和擴展它。

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

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

答案＃5

你也應該改變寬度和高度，讓容器與字體大小相匹配。

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