Установить цвет фона SVG Материал Дизайн иконок

Question

Я использую Материальный дизайн иконок, используя метод, описанный здесь:

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

Однако значки всегда в конечном итоге в черном цвете. Как я могу изменить свой цвет, скажем, на белый?

Я знаю, что исходный код SVG можно редактировать, чтобы добиться эффекта, но это не похоже на канонический путь. Репозиторий значков дизайна материалов имеет свои спрайты изображений CSS в разных версиях в зависимости от цвета, в то время как SVG имеет только один цвет (фактически, ни одного цвета, поскольку в SVG-коде никогда не упоминается ни один цвет). Если бы мне нужны разные файлы спрайтов SVG для белых или для черных значков, они бы включили разные версии, как в случае с CSS-спрайтами CSS, не так ли?

Answer 1

Вы можете попробовать упаковать его в файл шрифта и использовать его как Glyphicons in Bootstrap. Затем вы можете присвоить его цветом и цветом фона, как вам нужно.

Answer 2

Это просто вопрос установки fill недвижимости для вашего значка. Например, добавить класс, называемый «красный» на свой значок <div>:

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

Затем определите класс красный»в вашем CSS

.red { 
    fill: #ff0000; 
} 

Обратите внимание, что вы установите цвет заливки SVG элементов с. свойство fill, а не «цвет» и т. д., как с элементами HTML.

Answer 3

Я столкнулся с той же проблемой. Единственное решение, которое сработало для меня, - это вручную редактировать файлы .svg, чтобы добавить fill="white" в каждый путь. не как жесткий код col ors в .svg-файлах.

Поскольку я использовал angularjs в своем проекте, я написал директиву angularjs, которая генерирует значки svg с пользовательским цветом заливки/размером. Я разделяю его здесь, в случае, если кто-то считает это полезным: https://klarsys.github.io/angular-material-icons/demo.html

Answer 4

У меня была та же проблема - в конечном итоге изменения заполнения источника иконы:

<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 данный код является примером значка «левого шеврона» дизайна материала Google.

Теперь, если вы хотели изменить цвет значка, добавьте свойство fill в 1-й тег пути.

, и если вы хотите изменить его цвет фона, добавьте свойство fill в 2-й тег пути. Без фона цвет нет к его собственности.

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