Question

Angular 5+。

Angular CLI 1.7.4

按照此处的设置进行操作：https://material.angular.io/guide/getting-started

我如何实施素材图标：https://stackoverflow.com/a/48281556/1052888

我可以显示一些图标，但存在不一致之处。例如，这个：

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">bug report</mat-icon>
</button>

产量（点击时的蓝色轮廓显示它偏离中心的位置）：

当我点击铅笔时，动画圆圈显示在轮廓的正方形部分，在检查时是button标签的区域。

此时我没有添加任何其他样式来导致此行为。

我还关闭了Bootstrap以查看是否会导致相互冲突的问题。

这个渲染正确：

<button mat-icon-button>
   <mat-icon aria-label="Edit dashboard">build</mat-icon>
</button>

产量（所有图标都应该像这样居中）：

我的意思是居中，我认为它们应该位于button标记内，如build图标：

根本不显示某些图标：

 <button mat-icon-button>
        <mat-icon aria-label="Edit dashboard">aspect ratio</mat-icon>
 </button>

的产率：

是的，aspect ratio在角料https://material.io/icons/上列为图标

点击时的蓝线可以使用跨度样式处理。 Bootstrap导致了这一点。

控制台报告一个警告，如果主题存在，并非所有材质组件都可以正常工作，所以我一定要导入到angular-cli中：

"styles": [
        "styles.css",
        "../node_modules/bootstrap/dist/css/bootstrap.min.css",
        "../node_modules/material-design-icons/iconfont/material-icons.css",
        "../node_modules/@angular/material/prebuilt-themes/indigo-pink.css"

      ],

更新我想这些图标简直就是破了。在Angular Material网站本身here上，我更改了中间的心（最喜欢的）以显示edit mode图标。此处出现布局问题以及未显示的某些图标：

Answer 1

问题可能出在图标的名称上了

<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">report</mat-icon>
</button>

通常使用2个单词的图标名称，需要下划线字符

像bug_report

Answer 2

所有设置均正确且图标未损坏，唯一的问题是如何编写图标名称。

组成图标名称的单词必须用下划线（_）分隔。

例如，

而不是bug report，您应该使用bug_report。图标链接：https://material.io/tools/icons/?search=bug%20report&icon=bug_report&style=baseline
而不是aspect ratio，您应该使用aspect_ratio。图标链接： https://material.io/tools/icons/?search=aspect&icon=aspect_ratio&style=baseline

在Angular Material中，以下代码可以正常工作：

<button mat-icon-button aria-label="">
    <mat-icon>bug_report</mat-icon>
</button>
<button mat-icon-button aria-label="">
    <mat-icon>aspect_ratio</mat-icon>
</button>

演示在这里： https://stackblitz.com/edit/angular-m7sr4f

Answer 3

以下链接提供了角形材料支持的图标列表

https://www.angularjswiki.com/angular/angular-material-icons-list-mat-icon-list/

角度材质图标的问题

3 个答案: