Почему мои значки материалов Angular отличаются от значков Google Fonts?
Я работаю над проектом Angular 15 и заметил, что компоненты mat-icon, которые я использую, отличаются от значков, отображаемых на веб-сайте Google Fonts Icons (https://fonts.google.com/ иконки). Например, я использую следующий код, чтобы включить значок «загрузить» в свой проект:
<mat-icon>upload</mat-icon>
Чтобы загрузить значки, я добавил в свой index.html следующую строку:
<link href = "https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel = "stylesheet">
Однако значок, отображаемый в моем приложении, не соответствует дизайну, показанному на сайте значков Google Fonts.
Значок, который отображается в моем проекте Angular:
Значок, как он выглядит на веб-сайте Google Fonts Icons:
Мне интересно, почему такая разница во внешности. Есть ли что-то, чего мне не хватает при включении или настройке значков в Angular Material?
Ответы 1
Существует две разные версии шрифта Material Icon Font, которые вы можете выбрать на сайте Google Fonts в разделе «Стиль» на боковой панели:
- Символы материалов
- Иконки материалов
В своем приложении вы используете значки материалов, которые могут выглядеть иначе, чем значки из символов материалов. Существует открытый запрос на официальную поддержку символов материалов в Angular Material.
Это имеет смысл. Я использовал некоторый код в запросе функции, чтобы получить правильные значки. Большое спасибо