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

Question

在角度材料中设置样式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文件中尝试

watch:{
    val:function(val) {
        this.$emit('input', val);
    },
    list:function(list) {
        //Add your code here!
    }
}

或者将您的css规则放在style.css中，但请确保使用组件的名称进行封装以确保它不会泄漏

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