通过css中的图标名称获取mat-icon元素？

【问题标题】：Get mat-icon element by icon name in css?通过css中的图标名称获取mat-icon元素？
【发布时间】：2021-02-11 14:50:06
【问题描述】：

我有以下自动生成的垫子图标，因此我无法为它们添加 id 或 class。唯一可以用来区分它们的就是它们的名字：

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

我想知道我是否可以通过使用它的名称只设置删除图标而不影响其他垫子图标？这可能吗？

【问题讨论】：

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

标签： html css angular angular-material material-ui

【解决方案1】：

简答： 不幸的是没有！

长答案：

此代码 <mat-icon role="img">delete</mat-icon> 将在运行时转换为类似的内容

<mat-icon 
class="mat-icon notranslate material-icons mat-icon-no-color"
role="img" aria-hidden="true">delete</mat-icon>

如您所见，这并不能转化为可以使用 css 选择器访问的任何有用的东西（类名、数据属性..等）。根据specifications，唯一的信息在 Text 元素中，您不能使用它来访问元素。

有些人认为包括:contains() 选择器but it never saw the lights。

奖励：

你最后的手段是使用一些 javascript/typescript 来实现这一点：

let editIcons =[].filter.call(document.getElementsByTagName('mat-icon'), 
el => el.innerText=="edit");

editIcons.forEach( e => {
e.style.color = "red";
});

【讨论】：