css 修改svg图标的颜色，多种方式

方式一：利用drop-shadow

给icon加样式 (利用原图标的阴影区域，同时将原图标移动超过之前父元素范围)

filter: drop-shadow(red 80px 0);

transform: translateX(-80px);

给父元素加样式 （父元素超范围隐藏，正好把原图标的隐藏掉，显示阴影区域）

overflow:hidden;

如果想建立不同颜色的图标库的话，不推荐此方式

在angular material中使用时

import {MatIconRegistry} from '@angular/material';
import {DomSanitizer} from '@angular/platform-browser';
 
constructor( iconRegistry:MatIconRegistry ,domSanitizer:DomSanitizer ){
 iconRegistry.addSvgIcon('newIcon',domSanitizer.bypassSecurityTrustResourceUrl('assets/newIcon.svg'));
}
// 图标使用时

<mat-icon svgIcon="newIcon:icon1"></mat-icon>

方式二：

或者是直接修改svg内容里的fill填充颜色

方式三：

或者是使用字体图标库