方式一:利用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填充颜色
方式三:
或者是使用字体图标库