Question

这个问题来自Material2 Github repo。

我仍然无法设置包装在自定义组件中的Material组件的样式。

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

添加：

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

来自the API：

@Input（）inline：boolean - 图标是否应该内联，自动调整图标大小以匹配元素的字体大小图标包含在。
中

Answer 2

更新：2019-05-22

较新版本的Material Design可以选择将[inline]="true"设置为HTML元素的属性。

我建议改用这种方法。

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

使用此图标时，图标将从父容器继承！

GLHF！ :)

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

/* 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也是可能的）。

设置“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

试试这个。

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

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

Answer 6

要确保图标在调整大小后仍保持在其内置容器内（在<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 7

我认为问题是由于没有viewBox内联svg引起的 - 阻止了所有调整大小的尝试。

对我来说，替代方案是直接使用iconfont：

write(2)

Answer 8

另一种可能的选择，如果您希望选择将图像缩放到任何字体大小（例如300px），则以下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更改为您想要的最小尺寸，同样，要更改最大值，请更改{{1}无论你想要什么样的最大价值。

这对于作为SVG的图标来说特别方便，它们会扩展到您设置的大小（虽然我在使第三方SVG图标缩放以适应容器时遇到了一些麻烦，但是那个＆＃39; sa不同的问题）。如果你像我一样，你经常需要拥有特定尺寸的大多数图标（例如菜单图标），其中一些图标更大（例如装饰元素）。此循环允许您以1px的增量轻松测试不同大小的字体，直到找到适合您的大小。

这是做什么的？

当您的SCSS编译为CSS时，它将输出一个包含1到300个相关类的循环。

如何使用它？

要使用，只需将300课程添加到.iconsize-[x];

mat-icon

此示例将图标设置为45px宽度和高度。

Answer 9

为我工作

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不会溢出fab / button 我想不太优雅

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

9 个答案: