Новый материал Дизайн Иконки Темы - настройка цвета - PullRequest
Новая
       8

Новый материал Дизайн Иконки Темы - настройка цвета

0 голосов
/ 21 марта 2019

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

У меня есть простое веб-приложение jQuery, использующее значки Material Design. Я могу установить цвет значков с помощью CSS, все в порядке. Однако для некоторых значков, в частности для папки, новая тема Outlined гораздо больше подходит для моего приложения, и кажется, что цвет 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 я вижу, что стандартная папка материалов-значков имеет зеленый цвет. В Safari я вижу ожидаемый результат: контур папки синий. Однако в Chrome и Firefox контур остается черным. Эта модель поведения верна для всех значков в расширенных темах Outlined, Two-Tone и т. Д.

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

1 Ответ

0 голосов
/ 21 марта 2019

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

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