Как я могу получить Icon Angular Material Icon для отображения контура в моем приложении Angular?

Question

В настоящее время у меня есть

<mat-icon>info<mat-icon>

, который дает вывод информационного значка с закрашенным цветом.Тем не менее, я просто хочу, чтобы контур иконы.Как мне это сделать?

Значок, который мне нужен - https://material.io/tools/icons/?icon=info&style=outline вместо https://material.io/tools/icons/?icon=info&style=baseline

Answer 1

Я был недоволен, что до тех пор, пока не узнаю, что Google еще не выпустил свои новые проекты в виде набора шрифтов или значков SVG. Поэтому я собрал небольшой пакет npm для решения проблемы.

https://www.npmjs.com/package/ts-material-icons-svg

Просто импортируйте значки, которые вы хотите использовать, и добавьте их в свой реестр. Краткое руководство находится в файле Readme.

Приветствия Марко

Answer 2

Вы можете включить это |Material+Icons+Outlined в URL для отображения иконки материала в общих чертах.

Пример:

@import url("https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined");

Затем в файл шаблона вы можете добавить material-icons-outlined

<mat-icon class="material-icons-outlined">home</mat-icon>

Answer 3

Редактировать: 5/2019

Этот вопрос устарел. Более подробный, недавний ответ можно найти здесь: Как использовать новые темы значков дизайна материала: Outlined, Rounded, Two-Tone и Sharp?

Общая идея заключается в том, что некоторые значки не импортируются по умолчанию и должны быть нацелены из другой библиотеки.

---

Оригинальный ответ:

Вы ищете <mat-icon>info_outline</mat-icon>.

Вы можете использовать этот же шаблон для любого элемента, имеющего контурное изображение, но не пытайтесь использовать его для объектов, которые одинаковы для закрашенных / очерченных.

например. <mat-icon>label</mat-icon><mat-icon>label_outline</mat-icon>