Imposta il colore di SVG Material Design Icons sfondo

Question

mi fanno uso di materiale icone del design utilizzando il metodo descritto qui:

https://github.com/google/material-design-icons#using-svg-sprites

Tuttavia, le icone finiscono sempre in nero. Come dovrei cambiare il loro colore, diciamo, in bianco?

Sono consapevole della possibilità che il codice sorgente SVG possa essere modificato in modo da ottenere l'effetto, ma questo non sembra essere il modo canonico per andare. Il repository delle icone del design dei materiali ha gli sprite delle immagini CSS in diverse versioni a seconda del colore, mentre l'SVG è in un solo colore (in effetti, in assenza di colore perché nel codice SVG non viene mai menzionato alcun colore). Se avessi bisogno di diversi file sprite SVG per icone bianche o per icone nere, avrebbero incluso versioni diverse come nel caso degli sprite di immagini CSS, vero?

Answer 1

Si può provare a comprarlo in un file di font e utilizzarlo come Glyphicons in Bootstrap. Quindi puoi attribuire il colore e il colore di sfondo di cui hai bisogno.

Answer 2

Dovrebbe essere solo questione di impostare la proprietà fill per l'icona. Ad esempio, aggiungere una classe denominata "rosso" per la vostra icona <div>:

<div class="svg-ic_play_circle_outline_24px svg-ic_play_circle_outline_24px-dims red"></div> 

indicare la classe rossa" nel CSS

.red { 
    fill: #ff0000; 
} 

Nota di impostare il colore di riempimento degli elementi SVG con. la proprietà fill, non il "colore" ecc. come gli elementi HTML

Answer 3

Mi trovavo di fronte allo stesso identico problema: solo la soluzione che funzionava per me era modificare manualmente i file .svg per aggiungere fill="white" in ogni percorso. non come la codifica hard-coding ors nei file .svg.

Dal momento che stavo usando angularjs nel mio progetto, ho scritto una direttiva angularjs che genera icone svg con colore/formato di riempimento personalizzato. Sto condividendo qui, in caso qualcuno lo trova utile: https://klarsys.github.io/angular-material-icons/demo.html

Answer 4

Ho avuto lo stesso problema - finito per cambiare compilare fonte di icona:

<path d="M0 0h24v24h-24z" fill="none"/> 
<path d="M20 11h-12.17l5.59-5.59-1.42-1.41-8 8 8 8 1.41-1.41-5.58-5.59h12.17v-2z" 
     fill='white'/> 

Answer 5

Il dato codice è un esempio di un'icona di "left chevron" di google material design.

Ora se si desidera modificare il colore di un'icona, aggiungere la proprietà fill nel 1 ° tag percorso.

e se si desidera modificare il colore di sfondo aggiungere la proprietà fill nel tag percorso 2nd. Per nessun colore di sfondo dare nessuno alla sua proprietà.

<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"> 
    <path d="M15.41 7.41l-1.41-1.41-6 6 6 6 1.41-1.41-4.58-4.59z" fill="#fff"/> 
    <path d="M0 0h24v24h-24z" fill="none"/> 
</svg>