Блог

Я ищу портативное решение для раскрашивания некоторых значков. Моя первоначальная проблема, описанная ниже, проявляется в Chrome и Firefox на моем MacBook, в Safari цвета работают так, как ожидалось. Комментаторы сообщают, что цвета работают должным образом в Chrome на Windows.

У меня есть простое веб-приложение jQuery, использующее значки Material Design. Я могу настроить цвет значков с помощью CSS, все в порядке. Однако для нескольких значков, в частности папки, новая выделенная тема гораздо больше подходит для моего приложения, и кажется, что цвет CSS не оказывает никакого эффекта.

Здесь есть хороший пример настройки цветов значков, и если я адаптирую этот пример для чтения следующим образом:

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material Icons|Material Icons Outlined|Material Icons Two Tone|Material Icons Round|Material Icons Sharp">
<title>Change Color of Google Material Design Icons Example</title>

<i class="material-icons">folder</i>
<i class="material-icons" style="font-size:40px;color:green">folder</i>
<i class="material-icons-outlined" style="font-size:50px;color:blue">folder</i>  

Во всех моих браузерах на моем MacBook я вижу, что стандартная папка material-icons окрашена в зеленый цвет. В Safari я вижу ожидаемый результат: контур папки синего цвета. Однако в Chrome и Firefox контур остается черным. Этот шаблон поведения верен для всех значков в описанных расширенных темах, двухцветных и т.д.

Пожалуйста, предложения.

Я знаю, что это более старая тема, но, возможно, кто-то все еще ищет ответ.

Значки контуров, похоже, работают должным образом вместе с настройкой цвета css:

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material Icons|Material Icons Outlined|Material Icons Round|Material Icons Two Tone|Material Icons Sharp">

<i class="material-icons-outlined" style="color:green">home</i>
  

Настройка двухцветного цвета:

Как описано выше, вы можете использовать color ключ css, за исключением двухцветной темы materials, которая кажется глючной 😉

Обходной путь описан в одном из нескольких выпусков angular material на github с использованием пользовательского css-фильтра. Этот пользовательский фильтр можно создать здесь.

Например.:

HTML:

 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material Icons|Material Icons Outlined|Material Icons Round|Material Icons Two Tone|Material Icons Sharp">

<i class="material-icons-two-tone red">home</i>
  

css:

 .red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}
  

Вложения:

• Работает угловой стекблок
• Пример Codepen
• Генератор CSS-фильтров Codepen

Поскольку значки материалов имеют формат svg, вам необходимо получить доступ к дочернему элементу svg и манипулировать значениями svg. На них не влияет color свойство

 .material-icons svg {
  fill: white; // The filling
  stroke: black; // the outline - this depends on how the svg is drawn
}