J'ai SVG du symbole google qui est en 4 couleurs différentes. Je veux utiliser ce SVG dans mon code avec ces couleurs en utilisant mat-icon. Cependant, lorsque j'ai essayé de joindre ce SVG dans mon code, il devient noir et blanc.

Voici mon code pour la pièce jointe SVG

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

et déclaration du module 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 ) );
    }
}

Exemple 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>

Ici, je voudrais obtenir SVG car il est en 4 couleurs différentes au lieu de noir et blanc.

1
Jaydip 4 nov. 2019 à 13:11

1 réponse

Meilleure réponse

L'icône de tapis par défaut, définit la couleur des svgs que vous enregistrez, en suivant la formule mentionné dans les documents

la couleur par défaut du contenu SVG est la valeur CSS currentColor. Cela rend les icônes SVG par défaut de la même couleur que le texte environnant et vous permet de changer la couleur en définissant le style "couleur" sur l'élément mat-icon.

Il s'agit de la fonctionnalité par défaut et il n'y a aucun moyen de la modifier. L'attribut color onle obtient trois valeurs du thème css

  • Primaire
  • Prévenir
  • Accent

Donc, vous devez soit le remplacer globalement (détruisant ainsi le thème de toutes les icônes matérielles) soit par cas.

Les seules options dont vous disposez lors de l'inscription sont la fenêtre d'affichage, vous devez donc passer par la méthode CSS. Le css qui configure le currentColor est le suivant:

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

Afin d'éviter cela, je déclarerais dans mes fichiers css globaux une classe override, à déclarer par cas

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

et appliquez la classe sans thème à la déclaration d'icône de mat cible.

0
Athanasios Kataras 4 nov. 2019 à 11:40