как использовать выделенный значок материала - PullRequest
Новая
       47

как использовать выделенный значок материала

0 голосов
/ 14 ноября 2018

Сценарий:

  • Я использую значки материалов, и я сталкиваюсь с проблемой,
    Я обычно использую заполненные и все в порядке,
    сейчас я хочу использовать выделенные, они имеют одно и то же имя "screen_share «

Судебный случай:
Моя попытка была включена в index.html : 

<link 
type="text/css" href="https://fonts.googleapis.com/css?family=Material+Icons" 
rel="stylesheet"/> 

<link type="text/css" 
href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" 
rel="stylesheet">

и myComponent.html 

<button mat-button>
   <mat-icon>
      screen_share_outline
   </mat-icon>
</button>

но он все еще показывает заполненный.

Как я могу это сделать?

это не то же самое, что предложенный дубликат, потому что представленное решение - это вариант, который я пробовал и не сработал

Ответы [ 2 ]

0 голосов
/ 23 января 2019

Вы можете использовать какое-то время этот репозиторий.Работает почти так же, как Material Icon normal

cguilhermf / material-icons-outline

0 голосов
/ 14 ноября 2018

Похоже, что выделенные шрифты еще не были доработаны по каждой проблеме # 773

https://github.com/google/material-design-icons/issues/773

Я вижу, вы рассматриваете эту проблему

Как использовать новые темы значков дизайна материала: обведенные, округлые, двухцветные и резкие?

Пока указанные версии не будут полностью включены, вам нужно будет использовать обходной путь, предусмотренный в этом вопросе stackoverflow ... Я проверил его в stackblitz, и он работает.

Добавить следующий импорт в index.html 

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Добавить следующее в style.css 

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

Используйте следующее в html вашего компонента. 

<i class="material-icons-new outline-screen_share"></i>
...