如何添加图标到垫图标按钮

我使用的材料与角度

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

我试图添加一个图标到按钮，但我不知道如何做到这一点，无法找到这方面的文档。

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

看看这些文件，有这个:

enter image description here

这个按钮有如下 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>

这样做对吗？

223891 次浏览
小开

All you need to do is add the mat-icon-button directive to the button element in your template. Within the button element specify your desired icon with a mat-icon component.

You'll need to import MatButtonModule and MatIconModule in your app module file.

From the Angular Material buttons example page, hit the view code button and you'll see several examples which use the material icons font, eg.

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

In your case, use

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

As per the getting started guide at https://material.angular.io/guide/getting-started, you'll need to load the material icon font in your index.html.

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

Or import it in your global styles.scss.

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

As it mentions, any icon font can be used with the mat-icon component.

小开
最佳答案

Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose:

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

OR 

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

Here is a link to stackblitz demo.

小开

Add to app.module.ts

import {MatIconModule} from '@angular/material/icon';

& link in your global index.html.

小开

The Material icons use the Material icon font, and the font needs to be included with the page.

Here's the CDN from Google Web Fonts:

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

My preference is to utilize the inline attribute. This will cause the icon to correctly scale with the size of the button.

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

I add this to my styles.css to:

  • solve the vertical alignment problem of the icon inside the button
  • material icon fonts are always a little too small compared to button text
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;
}
小开

the above CSS can be written in SASS as follows (and it actually includes all button types, instead of just 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;
}
}
}

提交答案