css - 如何使用 mat-icon 保留默认的 SVG 颜色？

Question

我有 4 种不同颜色的谷歌符号 SVG。我想使用 mat-icon 在我的代码中使用这种颜色的 SVG。但是，当我尝试在我的代码中附加此 SVG 时，它变成了黑色和白色。

这是我的 SVG 附件代码

   <mat-icon 
        svgIcon="google-icon">
   </mat-icon>

和SVG模块声明

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

const googleIcon = require( 'lib/images/font-icons/google-icon.svg' );

@NgModule()
export class GoogleIconSvgModule {
    constructor(
        private iconRegistry : MatIconRegistry,
        private sanitizer : DomSanitizer,
    ) {
        iconRegistry.addSvgIcon( 'google-icon',
            sanitizer.bypassSecurityTrustResourceUrl( googleIcon ) );
    }
}

示例 SVG

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="512px" height="512px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#8EC3E5;}
    .st1{fill:#F4B61A;}
    .st2{fill:#787878;}
    .st3{fill:#A7C972;}
    .st4{fill:#E57E8F;}
</style>
<path class="st0" d="M181.6,0C81.3,0,0,32.5,0,72.6c0,7.7,0,35.9,0,43.6c0,40.1,81.4,72.6,181.6,72.6c100.4,0,181.6-32.5,181.6-72.6
    c0-7.7,0-35.9,0-43.6C363.2,32.5,282,0,181.6,0z"/>
<g>
    <path class="st1" d="M166.6,330.1c-63.4-2-127.5-16.5-166.2-44.8c0,0.5-0.3,1-0.3,1.5c0,7.7,0,35.9,0,43.6
        c0,38.1,73.4,69.3,166.6,72.4V330.1z"/>
</g>
<g>
    <path class="st2" d="M357.5,354.8c-7.6,0-13.7,2.7-18.3,8.1c-4.6,5.4-6.8,13.6-6.8,24.4c0,12.7,3.3,21.7,9.8,27.2
        c4.2,3.6,9.3,5.3,15.2,5.3c2.2,0,4.3-0.3,6.4-0.8c1.1-0.3,2.6-0.8,4.3-1.6l-9.3-8.9l9.9-10.4l9.4,8.8c1.5-3,2.5-5.6,3.1-7.9
        c0.9-3.4,1.4-7.3,1.4-11.8c0-10.4-2.1-18.4-6.4-24C371.9,357.6,365.7,354.8,357.5,354.8z"/>
    <path class="st2" d="M491.9,308.5H216.6c-11,0-20,9-20,20V446c0,11,9,20,20,20h275.3c11,0,20-9,20-20V328.5
        C511.9,317.4,502.9,308.5,491.9,308.5z M293.3,427.7c-6.5,5.6-15.7,8.4-27.6,8.4c-12.2,0-21.7-2.7-28.7-8.2
        c-7-5.5-10.4-13-10.4-22.7H245c0.6,4.2,1.8,7.4,3.5,9.5c3.2,3.8,8.7,5.7,16.4,5.7c4.6,0,8.4-0.5,11.3-1.5c5.5-1.9,8.3-5.5,8.3-10.7
        c0-3-1.3-5.4-4-7.1c-2.7-1.6-7-3.1-12.8-4.3l-10-2.2c-9.8-2.2-16.6-4.5-20.3-7.1c-6.2-4.3-9.3-10.9-9.3-20c0-8.3,3-15.1,9.1-20.6
        c6.1-5.5,15-8.2,26.8-8.2c9.9,0,18.3,2.6,25.2,7.7c7,5.2,10.6,12.6,10.9,22.5h-18.5c-0.3-5.6-2.8-9.5-7.5-11.8
        c-3.1-1.5-6.9-2.3-11.5-2.3c-5.1,0-9.2,1-12.2,3c-3,2-4.6,4.8-4.6,8.4c0,3.3,1.5,5.8,4.5,7.4c1.9,1.1,6,2.4,12.3,3.8l16.2,3.8
        c7.1,1.7,12.4,3.9,16,6.7c5.5,4.3,8.3,10.6,8.3,18.9C303.1,415.1,299.9,422.1,293.3,427.7z M392.1,440.3L381,429.8
        c-3.4,2.1-6.3,3.5-8.8,4.3c-4.1,1.4-9.1,2.1-14.9,2.1c-12,0-22-3.6-29.9-10.8c-9.5-8.6-14.3-21.3-14.3-38.1
        c0-16.9,4.9-29.6,14.7-38.3c8-7.1,17.9-10.6,29.8-10.6c11.9,0,22,3.7,30.1,11.2c9.4,8.6,14,20.7,14,36.3c0,8.2-1,15.1-3,20.7
        c-1.6,5.3-4,9.7-7.2,13.2l10.6,10L392.1,440.3z M481.9,433.6h-65.4v-92.4h19.3V417h46.1V433.6z"/>
</g>
<path class="st3" d="M216.6,278.5h77.7c42-13.3,68.9-33.9,68.9-57c0-7.3,0-32.5,0-41.7c-41.7,30.7-113.3,45.3-181.6,45.3
    c-68.4,0-139.9-14.6-181.6-45.3c0,9.2,0,34.4,0,41.7c0,39.9,80.6,72.3,180.3,72.6C189.4,284.5,202.3,278.5,216.6,278.5z"/>
<g>
    <path class="st4" d="M216.6,496c-27.6,0-50-22.4-50-50v-7c-63.4-2-127.5-16.5-166.2-44.8c0,0.5-0.3,1-0.3,1.5c0,7.7,0,35.9,0,43.6
        C0,479.5,81.4,512,181.6,512c43,0,82.5-6,113.6-16H216.6z"/>
</g>
</svg>

在这里我想要 SVG，因为它有 4 种不同的颜色，而不是黑色和白色。

Answer 1

默认情况下，垫子图标，设置您注册的 svgs 的颜色，遵循公式 mentioned in the docs

the default color of the SVG content is the CSS currentColor value. This makes SVG icons by default have the same color as surrounding text, and allows you to change the color by setting the "color" style on the mat-icon element.

这是默认功能，无法更改。颜色属性只能从主题 css 中获取三个值

• 小学
• 警告
• 口音

因此，您需要全局覆盖它(从而破坏所有 Material 图标的主题)或按情况覆盖它。

注册时您唯一的选择是视口(viewport)，因此您必须通过 css 方式。设置 currentColor 的 css 如下:

.mat-icon {
    background-repeat: no-repeat;
    display: inline-block;
    width: 24px;
    fill: currentColor;
}

为了避免这种情况，我会在我的全局 css 文件中声明一个覆盖类，以根据情况声明

.mat-icon {
    .no-theme {
       fill: inherit;
    }
}

并将无主题类应用于目标 mat-icon 声明。