Как использовать выделенные значки Material.io в псевдоэлементах css (:: before)?

Question

Я пытаюсь добавить Material.io значок к кнопке, используя :: before, но она отображает только заполненный значок.

Нет инструкций по настройкезначок выделен.

Это мой код:

.view-site:before{
    content: "\E8F4";
    font-family: 'Material Icons';
}

Как отобразить выделенный значок?

Answer 1

Google утверждает, что новые темы появились несколько недель назад, но, очевидно, нет понятия о том, как использовать контурные, острые, округлые и двухцветные иконки.

Я считаю, что единственная ссылка, которую мы получили, это здесь: https://github.com/google/material-design-icons/issues/773

Answer 2

Я полагаю, что вы пропустили точку до правила CSS.Вот фиксированное решение:

.view-site:before {
  content: "\E8F4";
  font-family: 'Material Icons';
}

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="view-site">
  
</i>