Как использовать пользовательские значки в Angular Material

Если вы хотите использовать пользовательские значки в Angular Material, вам необходимо выполнить несколько шагов. Во-первых, вам нужно создать свой собственный набор иконок. Angular Material поставляется со встроенным набором иконок, но вы также можете создавать свои собственные. Когда у вас есть иконки, вам нужно зарегистрировать их в Angular Material. Это можно сделать в файле модуля вашего приложения. После того, как ваши значки зарегистрированы, вы можете использовать их так же, как встроенные значки. Вы можете использовать их в своей разметке или получить к ним доступ программно. Это все, что нужно для использования пользовательских иконок в Angular Material! Следуя этим шагам, вы можете легко добавлять свои собственные значки в Angular Material для использования в своих приложениях.

В этом уроке мы будем использовать компонент >mat-icon> для создания шрифта Material Icons. Компонент будет использоваться в дополнение к поддержке пользовательского значка sva. На GitHub вы можете найти полный рабочий код. Этот пост для тех, кто только изучает Angular v4.2+. Angular Material для этого урока изначально был написан на Angular 5.2 и Angular 10.1. Значок, который мы будем использовать в этом уроке (который напоминает улыбающееся лицо), — это значок настроения. В дополнение к исчерпывающему списку значков материалов веб-сайт Material Design предоставляет различные стили значков , которые можно использовать самостоятельно.

Теперь мы можем использовать значок мыши для отображения SVG. Введя метку в свойство ввода файла .html, вы можете использовать метку значка , чтобы указать, к какому значку осуществляется доступ. URL-адрес должен быть https://app.html. Давайте посмотрим, что доступно на данный момент. Когда вы посмотрите на приложение в своем браузере, вы заметите, что пользовательский значок выполнен в стиле Material. Перемещение MatIconRegistry в сервисный класс поможет поддерживать более чистый код.

Как использовать иконки Svg в Angular 12?

Чтобы использовать иконки SVG в Angular 12, вам необходимо установить пакеты @angular/material и @angular/material-extensions. Затем вы можете использовать службу matIconRegistry для регистрации значков и добавления их в свои компоненты.

Вы можете управлять кодом в Angular2, используя файл Icon.svg в качестве отдельного файла. Кроме того, для этого можно использовать модуль ng-inline-svg (или, если возможно, другие подобные подходы). В результате это нечто среднее — у вас будут отдельные файлы для каждого типа изображения, причем изображения будут встроенными при загрузке страницы, чтобы вы могли манипулировать ими с помощью JS/CSS.

Использование aria-describedby как части вашего SVG позволит пользователям с ограниченными возможностями получить лучший опыт при использовании вашего веб-сайта. В результате, когда вы описываете свои значки с помощью aria-described by, вы сможете убедиться, что пользователи с ограниченными возможностями могут понять, что они представляют.

Дебаты Png против. Svg-иконки

С другой стороны, в файл SVG также можно добавить альфа-канал. Другими словами, поскольку они могут быть включены в прозрачные области, сохраняя при этом немного цвета, значки SVG более универсальны, чем значки PNG . Выбор того, какой файл использовать для ваших иконок, зависит от вашего конкретного проекта и его потребностей.

Как использовать пользовательские значки Svg в HTML?

Чтобы использовать пользовательские значки SVG в HTML, необходимо указать путь к файлу значка в атрибуте href элемента значка. Путь к файлу должен указываться относительно корневого каталога страницы. Например, если значок находится в папке с именем «icons» в корневом каталоге, путь к файлу будет «icons/icon.svg».

С появлением онлайн-инструментов, таких как Icomoon и Fontello, создавать веб-шрифты стало намного проще. С HTML5 у нас есть доступ к гораздо более широкому спектру значков благодаря масштабируемой векторной графике. Если вы хотите оказывать техническую поддержку Explorer 8, есть несколько простых резервных вариантов. Идентификатор фрагмента является встроенным свойством SVG. Мы можем сослаться на фрагмент, если хотим использовать спецификацию представления SVG или обратиться к массиву. Этот элемент является элементом SVG на основе его >view> ID. Чтобы показать только черную лошадь из этого спрайта шахматной фигуры (из Википедии), вы должны определить значения так же, как на схеме ниже.

Используя тег img для определения изображения, этот метод хорошо работает с Firefox, Chrome, Safari (для настольных компьютеров) и Opera. Кроме того, вы можете использовать внешний файл SVG для создания спрайтов CSS, как показано на изображении ниже. Это надежная, готовая к применению технология производства. Я протестировал его в различных основных браузерах (включая IE8), и он отлично работал. Иконки появляются на экране в виде тегов. Еще раз, Icomoon можно использовать для создания коллекции тегов символов вручную, или вы можете использовать для этого какой-либо плагин Grunt (google for Grunt SVG merge). За исключением IE9, этот метод можно использовать со всеми основными браузерами. Даже решение Джонатана Нила, SVG4everybody, можно использовать для решения этой проблемы.

Если в исходном коде не указан требуемый атрибут ширины, изображение sva не отображается в браузере Chrome. Если у SVG нет этого атрибута, браузер сделает изображение больше или меньше.

Как использовать изображения Svg на вашей веб-странице

Вы можете вставлять изображения SVG непосредственно в HTML, используя тег svg> /svg>. Доступ к изображению SVG можно получить в коде VS или в предпочитаемой вами среде IDE, скопировав код и вставив его в элемент body вашего HTML-документа. Если все пройдет гладко, ваша веб-страница будет выглядеть точно так, как показано здесь.
Иконки можно создавать с изображениями SVG, просто введя их имя в веб-браузере. В них можно встраивать HTML и устанавливать их кешированные версии. Доказательства также обещают будущее. Иконки должны быть созданы с помощью PNG или масштабируемых графических интерфейсов (SVG).

Список значков углового материала Svg

Библиотека Angular Material предоставляет набор многоразовых, хорошо протестированных и доступных компонентов пользовательского интерфейса, основанных на спецификации Google Material Design. Одной из особенностей библиотеки является возможность использовать значки SVG в качестве значков материалов. Набор значков Angular Material включает широкий спектр значков, в том числе значки социальных сетей, значки типов файлов и стрелки. Вы можете просмотреть полный список значков Angular Material на сайте значков материалов.

Иконки можно отображать с помощью компонента Mat-Icon Angular Material. Главной особенностью этого компонента является возможность отображать изображения с использованием веб-шрифтов, таких как Font-awesome, для чего просто требуется имя нужного изображения. Что происходит с иконками, которым не место в веб-шрифтах? Хотели бы вы внести изменения в значок (например, цвет при наведении или статус кнопки в определенном месте) во время выполнения? Следующая ошибка появляется после открытия раздела консоли браузера. При использовании контекста URL-адреса ресурса используется значение unsafe. Определение URL-адреса в качестве параметра используется для обхода SecurityTrustResourceUrl, что предотвращает внедрение злоумышленником вредоносного URL-адреса, такого как этот, см. официальную документацию DomSanitizer.

Позже мы рассмотрим лучший метод, а сейчас просто разместим его на странице app.html. Добавьте класс в HTML-тег mat-icon , как описано выше. Когда пользователь наводит курсор на значок, цвет изображения изменяется в результате SCSS. Иконки теперь должны менять цвет при наведении на них курсора. В одном из будущих постов мы постараемся улучшить это и провести рефакторинг, чтобы разрешить загрузку значков с помощью службы.

Как использовать иконки угловых материалов

Где я могу найти значки угловых материалов?
Единственное, что вам нужно сделать, это использовать следующие веб-шрифты Google в своем HTML-коде. Значки материалов можно найти в одном файле (42 КБ) и иметь размер от большого до маленького. Иконки разделены на десять различных категорий, которые вы можете увидеть в репозитории Git. Иконки также могут быть размещены на вашем собственном сервере.
На каких сайтах можно увидеть значки материалов?
Мы собрали значки Материалов в репозиторий Git, который включает все форматы, в которых мы делаем их доступными.
Как лучше всего настроить значок?
Элемент class должен быть добавлен в HTML-тег mat-icon, как показано выше. Добавление SCSS в класс изменяет цвет значка всякий раз, когда пользователь наводит на него курсор. Теперь при наведении курсора на значки они должны менять цвет.

Как использовать иконки угловых материалов

Иконки Angular Material — это SVG, которые можно использовать в вашем приложении Angular. Чтобы использовать значок, просто добавьте класс значка к элементу. Например, чтобы использовать значок круга учетной записи, вы должны добавить к элементу класс mat-icon-account-circle.

У нас есть библиотеки материалов в angular, которые можно использовать для быстрого проектирования нашего приложения и присвоения ему встроенных тегов. В библиотеке материалов есть мат-иконка, которая необходима для отображения нам иконок. В следующих разделах мы узнаем, как установить необходимые библиотеки и как реализовать это для отображения значков в нашем приложении. Наш первый сервис — MatIconRegistry, реестр, который позволяет нам идентифицировать и определять псевдонимы для значков с помощью внедряемого сервиса. Иконка очень проста в использовании, но требует, чтобы эта директива была импортирована в проект или корневой модуль, где мы собираемся ее отображать. Запустите вышеупомянутую команду в командной строке, чтобы создать новый проект angular. Пожалуйста, попробуйте одну из команд, перечисленных ниже, чтобы убедиться, что все необходимые библиотеки установлены в наш проект. Это особенно актуально для разработчиков, которые могут использовать библиотеку и модуль непосредственно в нашем приложении, не занимаясь этапами добавления библиотеки и модуля в корневой модуль.

Мат значок Svg

Mat- icon svg — это простая векторная графика, которую можно использовать для представления значка или логотипа. Графику можно изменять в размере без потери качества, ее можно легко редактировать или изменять.

Используя мат-ионный компонент угловых материалов, мы можем генерировать локальные SVG. Мы внедряем службу MatIconRegistry, а также DomSanitizer в конструктор. Функция registerIcons() включает параметры load и URL, а также частную функцию load. Если мы используем этот вариант, нам нужно будет только добавить имя файла изображения. Если вы используете строку, функция загрузки icon.service немного отличается. Имя изображения будет сгенерировано с использованием индекса в качестве ключа для имени изображения в функции загрузки. Теперь эту службу необходимо активировать, когда приложение начнет загружаться. Читать и поддерживать код намного проще, потому что он гораздо более удобочитаем. Мы разделили изображения на отдельные разделы и реализовали более простой сервис.