Question

我正在使用Angular with 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>

这是正确的方法吗？

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 demo的链接。

Answer 2

您需要做的就是将 mat-icon-button 指令添加到模板中的button元素。在按钮元素中，使用 mat-icon 组件指定所需的图标。

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

在Angular Material按钮示例页面中，点击视图代码按钮，您将看到几个使用材质图标字体的示例，例如。

<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中加载素材图标字体。

<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组件一起使用。

Answer 3

添加到app.module.ts

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

＆链接在全局index.html中。

Answer 4

我的偏好是利用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;
}

Answer 5

“材质”图标使用“材质”图标字体，并且该字体需要包含在页面中。

这是Google Web Fonts的CDN：

<!DOCTYPE html>
<html>

<head>
  <title>MINESWEEPER</title>
</head>

<body>

  <h1>MINESWEEPER</h1>
  <br>
  <form>
    Tiles:<input type="text" name="tc" value="10"> Mines:
    <input type="text" name="mc" value="40">
    <button onclick="init(this.form.tc.value, 
    this.form.mc.value)">submit</button>
  </form>
  <br>
  <canvas id="myCanvas" width="400" height="400"></canvas>

</body>

</html>

Answer 6

以上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;
        }
    }
}

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

6 个答案: