#inverted{
filter:hue-rotate(180deg);
-webkit-filter:hue-rotate(180deg);
-moz-filter:hue-rotate(180deg);
-ms-filter:hue-rotate(180deg);
}
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
</head>
<body>
<a class="material-icons">settings</a>
<a class="material-icons" id="inverted">settings</a>
</body>
</html>
В коде я дважды использовал иконку настроек иконки материалов. Для первого значка настроек я не использовал стили. Для 2-го значка настроек я установил свойство css filter на hue-rotate (180deg). Но hue-rotate (180deg) никак не повлиял на это. Я знаю, что для того же эффекта filter:hue-rotate(180deg) я могу сделать color:white;background-color:black. Но я хочу знать, почему hue-rotate (180deg) не инвертировал цвета иконки? Есть ли другой способ инвертирования цветов, который работает с белым и черным.