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填充颜色

方式三：

或者是使用字体图标库