角度材质图标的问题

Question

角 5+。

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

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

我的意思是居中是我认为它们应该像build图标一样在button标签内居中：

---

有些图标根本不显示：

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

产量：

是的， aspect ratio在 Angular Material 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 站点本身，这里，我更改了中间的心形（最喜欢的）以显示edit mode图标。 此处出现布局问题以及某些图标未显示：

Answer 1

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

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

因此，例如：

• 相反，您应该使用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 2

也许问题是图标的名称：

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

通常图标名称有 2 个字，需要下划线字符

像 bug_report

Answer 3

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

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