如何将图标添加到mat-icon-button

Question

我正在使用Angular和Material

 <button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>

我正在尝试为按钮添加一个图标，但是我不知道如何做，也找不到相关文档。

https://material.angular.io/components/button/api

查看文档，有这个内容：

那个按钮的HTML代码如下：

<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
    <img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
    <span _ngcontent-c1="">Material</span>
  </span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>

那是正确的做法吗？

- Alexander Mills

Answer 1

只需将<mat-icon>放置在mat-button或mat-raised-button之内。请参见下面的示例。请注意，为了演示目的，我使用了材料图标而不是您的svg：

<button mat-button>
    <mat-icon>mic</mat-icon>
    Start Recording
</button>

或者

<button mat-raised-button color="accent">
    <mat-icon>mic</mat-icon>
    Start Recording
</button>

这里有一个链接指向stackblitz演示。

- FAISAL

---

谢谢，你有什么想法可以使用不是默认图标之一的图标吗？我想使用一个“播放”按钮（像填充的 chevron），但“播放”不是可用的图标。 - Alexander Mills

在这种情况下，您必须使用mat icon registry注册和图标。 - FAISAL

嗨@Faisal我也使用了这个，而且它也起作用了，但是我将图标注册为SVG，并按照以下方式使用<mat-icon svgIcon="search"></mat-icon>，但在<button>中使用时，不会渲染，你知道为什么吗？ - DJG22

你能帮我修复这个问题吗？https://stackoverflow.com/questions/51925724/how-to-customize-angular-material-design-stepper-in-angular-4 @Faisal - Zhu

@Pipo，mat-icon-button 只会渲染一个带有透明背景的圆形“图标按钮”，没有任何文本。当我们需要添加文本和图标时，我们使用 mat-icon 放在 mat-button 内部。 - FAISAL

Answer 2

您只需在模板中的按钮元素中添加mat-icon-button指令。在按钮元素内，使用mat-icon组件指定所需的图标。

您需要在应用程序模块文件中导入MatButtonModule和MatIconModule。

从 Angular Material 按钮示例页面，点击“查看代码”按钮，您将看到几个示例，这些示例使用 material icons 字体，例如：

<button mat-icon-button>
  <mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>

在您的情况下，请使用：

<mat-icon>thumb_up</mat-icon>

根据 https://material.angular.io/guide/getting-started 中的入门指南，您需要在 index.html 中加载 Material 图标字体。

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

或者在你的全局 styles.scss 中导入它。

@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

正如所述，任何图标字体都可以与mat-icon组件一起使用。

- Jason Schroder

---

顺便说一下，这只会在图标周围创建一个圆形按钮。因此，如果您在图标旁边添加按钮文本，它会出问题。 - ganeshk

Answer 3

我的偏好是使用inline属性。这将使图标与按钮的尺寸正确缩放。

    <button mat-button>
      <mat-icon inline=true>local_movies</mat-icon>
      Movies
    </button>

    <!-- Link button -->
    <a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>

我将这段代码添加到我的styles.css文件中，以便:

• 解决按钮内图标的垂直对齐问题
• 与按钮文本相比，材质图标字体总是稍微有点小

button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
  vertical-align: top;
  font-size: 1.25em;
}

- rynop

Answer 4

添加到 app.module.ts 中

导入 {MatIconModule} from '@angular/material/icon';

& 在全局的 index.html 中添加链接。

- Alexandr Bulgakov

Answer 5

上述CSS可以在SASS中如下编写（实际上包括所有按钮类型，而不仅仅是button.mat-button）

button,
a {
    &.mat-button,
    &.mat-raised-button,
    &.mat-flat-button,
    &.mat-stroked-button {
        .mat-icon {
            vertical-align: top;
            font-size: 1.25em;
        }
    }
}

- Remco Nonhebel

Answer 6

Material 图标使用 Material 图标字体，该字体需要与页面一起包含。

这是来自 Google Web Fonts 的 CDN：

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

- Alex