Javascript 如何更改 Angular Material 上垫子图标的大小？

How to change size of mat-icon on Angular Material?

提问by Nguy?n Phúc

mat-icon tag of Angular Material always has default size is 24px. So how to change it ...???

Angular Material 的 mat-icon 标签的默认大小始终为 24px。那么如何改变它......？

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

回答by Petey

font-size tends to mess with the position. I do something like:

字体大小往往会弄乱位置。我做这样的事情：

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

CSS:

CSS：

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

Where the 2 can actually be any number. 2 doubles the original size.

其中 2 实际上可以是任何数字。2 原尺寸翻倍。

回答by holydragon

Since Angular Material uses 'Material Icons' Font-Family, the icon size depends on font-size.

由于 Angular Material 使用 ' Material Icons' Font-Family，图标大小取决于font-size。

Therefore, if you want to modify the size of the icon then you change its font-sizein your CSS file.

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

For example,

例如，

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

回答by Shakur

In order to properly wrap the font apart from setting the font size you also need to adjust the width:

除了设置字体大小之外，为了正确包装字体，您还需要调整宽度：

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

回答by Iamamellon

You should also change the width and height so the container matches the font-size.

您还应该更改宽度和高度，以便容器与字体大小匹配。

Depending on your use case a good feature of the mat-icon is a bool input of [inline], set this to true and it will auto size to the element it's contained in.

根据您的用例，mat-icon 的一个很好的功能是 [inline] 的 bool 输入，将其设置为 true，它将自动调整大小到它所包含的元素。

回答by Marcos Trazzini

The "font-size" approach only works for regular (font-based) sizing. Thus it doesn't work for svg icons, which the only way to resize that really worked for me so far was scaling it up/down.

“字体大小”方法仅适用于常规（基于字体）大小调整。因此，它不适用于 svg 图标，到目前为止，调整大小对我来说真正有效的唯一方法是放大/缩小它。

回答by brian

Create the class name matches to the actual function. It become more easy to remember, use and extend it.

创建与实际函数匹配的类名。它变得更容易记住、使用和扩展它。

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

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

回答by rainversion_3

To change mat-iconfont-size for whole project, I created an icon.cssfile and added it into angular.json

要更改mat-icon整个项目的字体大小，我创建了一个icon.css文件并将其添加到angular.json

Content inside icon.css:

里面的内容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;
}

In angular.jsonadd the icon.cssfile to your styles in build:

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

...

Note: Include stylesheets as per your project

注意：根据您的项目包含样式表

回答by Zeldianto Eka Putra

try first using:

首先尝试使用：

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

If you can't, try in the following way:

如果不能，请尝试以下方法：

.mat-icon {
    width: 10px;
}

Good luck !!!

祝你好运 ！！！