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

 

方式三：

或者是使用字體圖標庫