我正在使用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>
这是正确的方法吗?
只需在<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的链接。
您需要做的就是将mat-icon-button指令添加到模板中的button元素。在按钮元素内,使用mat-icon组件指定所需的图标。
您需要在app模块文件中导入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组件一起使用。
添加到app.module.ts
从'@ angular / material / icon'导入{MatIconModule};
并链接到您的全球index.html。
我的偏好是使用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;
}
“材质”图标使用“材质”图标字体,字体需要包含在页面中。
这是来自Google Web Fonts的CDN:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
上面的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;
}
}
}