Ustaw kolor tła SVG Materiał Ikony projekt

Question

mogę skorzystać z ikon projekt materiału z zastosowaniem metody opisanej tutaj:

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

Jednak ikony zawsze kończy się na czarno. Jak mam zmienić kolor, na przykład, na biały?

Jestem świadomy możliwości, że kod źródłowy SVG można edytować, aby osiągnąć efekt, ale nie wydaje się to być kanoniczną drogą. Repozytorium ikon materiałów projektowych ma swoje sprite'y CSS w różnych wersjach w zależności od koloru, podczas gdy SVG ma tylko jeden kolor (w rzeczywistości w żadnym kolorze, ponieważ w kodzie SVG nie ma informacji o kolorze). Gdybym potrzebował różnych plików sprite SVG dla białych lub czarnych ikon, zawierałoby różne wersje, tak jak w przypadku ikonek CSS, prawda?

Answer 1

Możesz spróbować spakować go do pliku czcionki i używać go jak Glyphicons in Bootstrap. Następnie możesz przypisać go do koloru i koloru tła.

Answer 2

Powinna to być kwestia ustawienia właściwości fill dla Twojej ikony. Na przykład, dodać klasę o nazwie „czerwony” na ikonę <div>:

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

Następnie określić klasę czerwoną”w CSS

.red { 
    fill: #ff0000; 
} 

Pamiętaj, że ustawienia koloru wypełnienia elementów SVG z. Właściwość fill, a nie "kolor" itp. Tak jak w przypadku elementów HTML:

Answer 3

Wystąpił dokładnie ten sam problem.Tylko rozwiązanie, które działało dla mnie było ręcznie edytować pliki .svg, aby dodać fill="white" w każdej ścieżce. nie tak jak col z twardym kodowaniem lub w plikach .svg.

Od kiedy używałem angularjs w moim projekcie, napisałem dyrektywę angularjs, która generuje ikony svg z niestandardowym kolorem/rozmiarem wypełnienia. Dzielę go tutaj, w przypadku gdy ktoś uzna za przydatne: https://klarsys.github.io/angular-material-icons/demo.html

Answer 4

miałem ten sam problem - skończyło się zmienia wypełnienie źródło ikoną:

<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

The dany kod jest przykładem ikony "lewego chevronu" w google material design.

Teraz, jeśli chcesz zmienić kolor ikony, dodaj właściwość fill w 1. ścieżce.

Jeśli chcesz zmienić kolor tła, dodaj właściwość fill w tagu drugiej ścieżki. Dla żadnego koloru tła nie dajemy żadnemu do jego właściwości.

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