Html 在css中按图标名称获取mat图标元素？

我有以下自动生成的mat图标，因此我没有为它们添加id或类的选项。唯一可以用来区分它们的是它们的名称：

<mat-icon role="img">details</mat-icon>
<mat-icon role="img">edit</mat-icon>
<mat-icon role="img">delete</mat-icon>

详细信息
编辑
删除

---

我想知道我是否可以使用其名称仅设置删除图标，而不影响其他mat图标？可能吗？

简短回答： 不幸的是没有

长答案：

此代码

delete

将在运行时转换为如下内容

删除

正如您所看到的，这并不能转化为任何有用的东西（类名、数据属性等等），这些东西可以使用css选择器访问。唯一的一条信息在文本元素中，您不能根据上下文访问元素

有人认为应该包含

：contains（）

选择器

奖金：

您最后的办法是使用一些javascript/typescript来实现这一点：

let editIcons=[].filter.call（document.getElementsByTagName（'mat-icon'），
el=>el.innerText==“编辑”）；
editIcons.forEach（e=>{
e、 style.color=“红色”；
});

---

您到底想在删除图标上“设置”什么？它们是分布在整个页面中还是在一个位置。@BenzaraTahar与其他两个图标相比，它似乎更薄，即使它们都来自同一个组件（mat图标）。所以，需要大胆一点。@ManasKhandelwal他们在一个地方。