Angular 引入SVG并动态修改颜色，修改svgIcon颜色！

前提：

https://v10.material.angular.io/components/icon/overview

TS

import {MatIconRegistry} from '@angular/material/icon';
import {DomSanitizer} from '@angular/platform-browser';

	constructor(
		private iconRegistry: MatIconRegistry,
		private ds: DomSanitizer
	){
		iconRegistry.addSvgIcon('thumbs-up', ds.bypassSecurityTrustResourceUrl('assets/img/thumbs-up.svg'));
	}

Html

<mat-icon  svgIcon="thumbs-up" aria-hidden="false"></mat-icon>

---

如果想要动态修改svgIcon 颜色的话，需要去掉svg fill里的样式
重点： 一定要把svg 里面所有的 fill 改为 none！

<?xml version="1.0" encoding="UTF-8"?>
<svg width="15px" height="15px" viewBox="0 0 15 15" version="1.1" color="white" style="color: currentColor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 57.1 (83088) - https://sketch.com -->
    <title>9B96C6EF-3F47-49EA-BE02-90C775B0FEE1</title>
    <desc>Created with Sketch.</desc>
    <defs>
        <polygon id="path-1" points="0 0.322666667 7.81526667 0.322666667 7.81526667 12.7288667 0 12.7288667"></polygon>
    </defs>
    <g id="页面-1" stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
        <g id="2.0-柱状-流程图" transform="translate(-12.000000, -114.000000)">
            <g id="仪表盘" transform="translate(12.000000, 114.000000)">
                <path d="M10.9004,8.71163333 C10.5184,10.0149667 9.4364,11.0616333 8.00973333,11.3236333 C7.0554,11.4986333 6.1214,11.2886333 5.36073333,10.8086333 L3.0394,13.6153 C4.6054,14.7479667 6.61306667,15.2656333 8.66406667,14.8889667 C11.6324,14.3439667 13.8524,12.0836333 14.4907333,9.31863333 L10.9004,8.71163333 Z" id="Fill-1" fill="currentColor"></path>
                <path d="M10.9391333,6.7816 C10.9571333,6.8546 10.9771333,6.9266 10.9911333,7.00126667 C11.0148,7.12926667 11.0308,7.25693333 11.0411333,7.3836 L14.6691333,7.99693333 C14.6928,7.45526667 14.6584667,6.9026 14.5568,6.3466 C14.5041333,6.06126667 14.4341333,5.7836 14.3508,5.51226667 L10.9391333,6.7816 Z" id="Fill-3" fill="currentColor"></path>
                <g id="编组" transform="translate(0.000000, 0.010767)">
                    <mask id="mask-2" fill="currentColor">
                        <use xlink:href="#path-1"></use>
                    </mask>
                    <g id="Clip-6"></g>
                    <path d="M4.3776,9.8952 C4.0396,9.44786667 3.79526667,8.91986667 3.68726667,8.33153333 C3.31693333,6.31453333 4.65193333,4.3792 6.66893333,4.0092 C6.84826667,3.9762 7.02626667,3.9612 7.20326667,3.95486667 L7.81526667,0.337533333 C7.22526667,0.299866667 6.6216,0.3322 6.01426667,0.443866667 C2.02826667,1.17553333 -0.609733333,4.99986667 0.1216,8.98586667 C0.390266667,10.4488667 1.07693333,11.7288667 2.0336,12.7288667 L4.3776,9.8952 Z" id="Fill-5" fill="currentColor" ></path>
                </g>
                <path d="M8.52343333,4.15366667 C9.27876667,4.40866667 9.93576667,4.903 10.3917667,5.56233333 L13.8467667,4.27733333 C12.8751,2.41333333 11.1444333,1.06466667 9.13143333,0.556333333 L8.52343333,4.15366667 Z" id="Fill-7" fill="currentColor"></path>
            </g>
        </g>
    </g>
</svg>