角度材料图标的问题-Java 学习之路

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>

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

enter image description here

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

我此时不会添加任何其他样式来导致此行为 .

我也关闭了Bootstrap，看看是否会导致相互矛盾的问题 .

这个渲染正确：

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

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

enter image description here

我的意思是居中，我认为它们应该在 button 标签中居中，如 build 图标：

enter image description here

有些图标根本不显示：

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

收益率：

enter image description here

是的， aspect ratio 被列为Angular Material的图标https://material.io/icons/

点击上的蓝线可以使用 Span 样式处理 . 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"

      ],

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

Repro bug on Angular Material site

1 回答

0
也许问题是图标的名称：
```
<button mat-icon-button>
    <mat-icon aria-label="Edit dashboard">report</mat-icon>
</button>
```
通常带有2个单词的图标名称，需要下划线字符

像bug_report
回复于 2024-05-06T17:49:28+08:00

角度材料图标的问题

1 回答

相关问题