如何在 Material 中更改 mat-icon 大小

Posted 2023-02-19

【中文标题】如何在 Material 中更改 mat-icon 大小

【英文标题】：How to change mat-icon size in Material

【发布时间】：2017-10-08 19:41:23

【问题描述】：

本题来自 Material2 Github repo。

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

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

添加：

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

不适用于我的自定义组件中的 Material 组件。

【问题讨论】：

“在”还是“在”？ :host 语法旨在应用于组件本身，而 not 应用于它的子组件。听起来你有一个md-icon 的“孩子”，这意味着你只想用普通类而不是使用:host 来调整css

width/height/font-size 覆盖更适合内置材质图标。不幸的是，当您使用 svgIcon

时，更改字体大小将不起作用

【参考方案1】：

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

在我看来，另一种选择是直接使用 iconfont：

<i class="material-icons" style="font-size: 40px">face</i>

【参考方案2】：

试试这个。

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


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

【讨论】：

所以这与我的解决方案相同，但更灵活..所以我将转换为这种方式:) thx

.mat-icon 成功了

【参考方案3】：

编辑：请查看已接受的答案！

像这样使用它就可以了。

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

当在主题 css 中定义这个时（不在组件 :host 中）

md-icon.size-16 
  width: 16px;
  height: 16px;
  line-height: 16px;

【讨论】：

字体大小丢失？

不在此答案中。您可以将 3 个不同的答案合二为一吗？！

在所有情况下都不是一个好主意。我通常选择评分最高的答案。就您而言：为什么您要提供 3 个不同的答案？

我希望它有效。我用这个添加了font-size。无论如何谢谢:-)

【参考方案4】：

更新：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);
    
  

【讨论】：

这个解决方案使用 SCSS，什么是 vanilla CSS 解决方案？此外，这只会改变包装器 <md-icon> 元素的边界框大小，而不是其中包含的 <svg> 元素。

请注意，这在使用em 单元时会出现意外行为，因为 em 与元素的 font-size 相关。所以@include md-icon-size(3em);实际上会成功9em

我同意@GerardoFigueroa 的观点。它不会改变 svg 的大小，它只是改变边界框的大小。

添加 !important 就可以了，就像这个 font-size: $size !important;

【参考方案5】：

另一个可能的选项，如果您想选择将图像缩放到最大字体大小（例如 300 像素），则以下 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 更改为您想要的最小尺寸，同样，要更改最大值，请将 300 更改为您想要的任何最大值喜欢。

这对于作为 SVG 的图标特别方便，它们会缩放到您设置的大小（尽管我在让第三方 SVG 图标缩放以适应容器时遇到了一些麻烦，但这是一个不同的问题）。如果您像我一样，通常需要将大多数图标设置为特定大小（例如菜单图标），而某些图标更大（例如装饰元素）。此循环允许您轻松测试不同大小的字体，最多以 1 像素为增量测试任意大小，直到找到适合您的大小。

这是做什么的？

当你的 SCSS 被编译成 CSS 时，它会输出一个循环，其中包含从 1 到 300 的相关类。

如何使用它？

要使用，只需将.iconsize-[x] 类添加到您的mat-icon；

<mat-icon class="iconsize-45">show_chart</mat-icon>

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

【讨论】：

嗯.. 有趣的想法，但对我来说，我没有看到我想限制最大尺寸的情况.. 而且我永远不会使用 !important :P

@Mackelito 设置最大尺寸的原因仅仅是因为您最终会得到一个巨大的 CSS 文件（循环的逻辑需要它）。另一种选择是使用内联属性。

【参考方案6】：

我正在使用

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

与

.mat-icon 
    transform: scale(2);

用于调整 svg 元素的大小。这对我来说是唯一可行的解​​决方案，其中 2 是实际大小的 200%（也可以缩小到例如 0.5）。

设置“高度”和“宽度”对我来说不是选项，因为 mat-icon 组件的渲染 svg 元素目前没有 viewBox 属性。但是 viewBox 属性是强制性的，以使其与“高度”和“宽度”样式一起使用。也许 Angular Material 团队将来会改进这一点。

附注： 您可以使用父包装器将 mat-icon 居中，然后

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

【讨论】：

很好的解决方案。为我工作！

完美解决方案

【参考方案7】：

就我而言，这非常有效。我使用最新的材料（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 - 图标是否内联， 自动调整图标大小以匹配元素的字体大小 图标包含在。

【讨论】：

这是现在更好的解决方案。不需要所有其他的混音。

适用于字体图标，不适用于 SVG

我同意，[inline]="true" 似乎是一个更优雅的解决方案，如果匹配的字体大小符合我们需要的大小。

这在一定程度上起作用 - 如果我将字体大小设置为 ~150px 或更大，则图标开始超出其容器 div 的顶部。

谢谢。更简单的是，<mat-icon inline>more_vert</mat-icon> 成功了

【参考方案8】：

为我工作

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/按钮 我猜不太优雅

【参考方案9】：

为确保图标在调整大小后在其内置容器（<mat-icon> 组件内）中保持居中，请使用此解决方案。 不需要包装盒也不需要inline=true 属性。

HTML

<mat-icon class="big">error_outline</mat-icon>

CSS

.big 
  width: 2rem;
  height: 2rem;
  font-size: 2rem;

注意：您也可以使用其他单位，例如 px 或 em

【参考方案10】：

最简单的方法（没有额外的 CSS），以下工作正常

    <sup><mat-icon inline="true">info</mat-icon></sup>
<small><mat-icon inline="true">info</mat-icon></small>
<big><mat-icon inline="true">info</mat-icon></big>

请注意inline="true"，它会继承父标签的样式