时间戳

首页 > 解决方案 > 无法将 css 应用于 mat-icon 内的 svg 图标

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

问题描述

在 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 - 它也可以正常工作。

标签： angularsvgangular-material2

解决方案

在您的 component.css 文件中尝试

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

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

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

推荐阅读