如何更改材质中的md-icon大小

Question

这个问题来自material2 github repo https://github.com/angular/material2/issues/4422#issuecomment-300309224

我仍然有问题来设置包装在自定义组件中的材质组件.

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

加入

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

不适用于我的自定义组件中的材质组件

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

我一直在问这个问题所以我只想更清楚地说明如何使用它...

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

Answer 3

我正在使用

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

同

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

用于调整svg元素的大小.对我来说这是唯一可行的解​​决方案,其中2是实际尺寸的200%(缩小到例如0.5也是可能的).

设置"height"和"width"对我来说不是一个选项,因为mat-icon组件的渲染svg元素目前没有viewBox属性.但是必须使用viewBox属性才能使其与"高度"和"宽度"样式一起使用.也许Angular Material团队将来会改进这一点.

作为旁注:您可以使用父包装器将mat-icon居中

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

Answer 4

编辑:请看到接受的答案!

像这样使用就可以了.

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

当在主题css中定义它时(不在组件:主机中)

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