Question

我有Google符号的SVG，它有4种不同的颜色。我想在我的代码中使用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

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

SVG内容的默认颜色是CSS currentColor值。这使得SVG图标默认具有与周围相同的颜色文字，并允许您通过设置“颜色”样式来更改颜色在mat-icon元素上。

这是默认功能，无法更改。 color属性onle从主题css获取三个值

主要
警告
口音

因此，您需要全局覆盖（从而破坏所有材质图标的主题）或根据情况覆盖。

注册时唯一拥有的选项是视口，因此必须通过CSS方式进行。设置currentColor的CSS如下：

var originalArray = [{
  id: 1,
  elements: [1, 2]
},
{
  id: 1,
  elements: [3, 4]
},
{
  id: 5,
  elements: ['a', 'b']
},
{
  id: 5,
  elements: ['c', 'd']
}, {
  id: 27,
  elements: []
}]

var newArray = [];
for (obj of originalArray) {

    var empty = true;
    for (newobj of newArray) {
       if (obj.id == newobj.id) { empty = false; }
    }
    if (empty) {
        newArray.push({id: obj.id, elements: obj.elements});
    } else {
        for (newobj of newArray) {
           if (newobj.id == obj.id) {
               for (o of obj.elements) {
                 newobj.elements.push(o);
                }
           }
        }
    }
}
console.log(newArray);

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

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

并将no-theme类应用于目标mat-icon声明。

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

1 个答案: