无法将 css 应用于 mat-icon 内的 svg 图标

Question

在 Angular 材质中设置 svg 图标的样式时遇到问题。

控制器：

mdIconRegistry.addSvgIcon('testAnimation', sanitizer.bypassSecurityTrustResourceUrl(`${svgPath}/icons/testAnimation.svg`));

模板：

<a class="icon"><md-icon svgIcon="testAnimation"></md-icon></a>

风格：

.icon .st9 {fill: black}

问题是这个 css 规则不适用于图标 - 我不知道为什么。

在我的 svg 图像中有一个带有此类的路径，可以通过 document.querySelectorAll('.icon .st9') 找到。我什至可以使用document.querySelectorAll('.icon .st9')[0].style.fill = 'black' 更改它的填充颜色。

当我在没有材料的情况下直接在 html 中插入 svg - 它也可以正常工作。

Answer 1

在你的 component.css 文件中尝试一下

:host ::ng-deep .icon .st9 {fill: black}

或者把你的css规则放到style.css中，但是一定要封装组件的名字，保证不会泄露

app-your-component .icon .st9 {fill: black}