Material icon: Material Icons — Material UI

Leave a Comment / Разное / By /

AUR (en) — ttf-material-design-icons

العربية Asturianu Català Český Dansk Deutsch Ελληνικά English Español Español (Latinoamérica) Suomi Français עברית Hrvatski Magyar Italiano 日本語 Norsk Nederlands Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Srpski Türkçe Українська 简体中文 正體中文

  • AUR Home
  • Packages
  • Register
  • Login

Search Criteria

Enter search criteria

Search by Name, DescriptionName OnlyPackage BaseExact NameExact Package BaseKeywordsMaintainerCo-maintainerMaintainer, Co-maintainerSubmitter

Keywords

Out of Date AllFlaggedNot Flagged

Sort by NameVotesPopularityVotedNotifyMaintainerLast modified

Sort order AscendingDescending

Per page 50100250

 

Package Details: ttf-material-design-icons 4.

0.0-1

Dependencies (0)

    Required by (2)

    • emacs-all-the-icons
    • excalibar-git

    Sources (1)

    • ttf-material-design-icons-4.0.0.tar.gz

    AUR (en) — ttf-material-design-icons

    العربية Asturianu Català Český Dansk Deutsch Ελληνικά English Español Español (Latinoamérica) Suomi Français עברית Hrvatski Magyar Italiano 日本語 Norsk Nederlands Polski Português (Brasil) Português (Portugal) Română Русский Slovenčina Srpski Türkçe Українська 简体中文 正體中文

    • AUR Home
    • Packages
    • Register
    • Login

    Search Criteria

    Enter search criteria

    Search by Name, DescriptionName OnlyPackage BaseExact NameExact Package BaseKeywordsMaintainerCo-maintainerMaintainer, Co-maintainerSubmitter

    Keywords

    Out of Date AllFlaggedNot Flagged

    Sort by NameVotesPopularityVotedNotifyMaintainerLast modified

    Sort order AscendingDescending

    Per page 50100250

     

    Package Details: ttf-material-design-icons 4.

    0.0-1

    Dependencies (0)

      Required by (2)

      • emacs-all-the-icons
      • excalibar-git

      Sources (1)

      • ttf-material-design-icons-4.0.0.tar.gz
      Материальный дизайн

      — есть ли официальный или исчерпывающий список всех матовых иконок в Angular?

      спросил

      Изменено 1 месяц назад

      Просмотрено 295 тысяч раз

      Я начал использовать из Angular Material, и мне интересно, есть ли официальный список имен всех включенных значков. Несколько месяцев назад я нашел страницу, на которой перечислялись некоторые из них, но не все, и этот сайт больше не доступен.

      Есть ли где-нибудь официальный или исчерпывающий список этих значков?

      • иконки
      • материал-дизайн
      • угловой материал

      1

      Поскольку значки, перечисленные на веб-сайте, немного устарели, вот разветвленный список значков, поддерживаемый и обновляемый Йоссефом Харушем Кадоури

      • Значки Material Design DX (MDIDX)

      Старая ссылка на Material.io теперь перенаправляет на страницу значков в Google Fonts.

      Существует также другой шрифт значка от Google, который поддерживает вариативные шрифты, которые вы можете найти на той же странице, щелкнув параметр «Символы материала».

      В любом случае, команда Angular Material ожидает, что разработчики сами включат шрифт Google Material Design Icon Font (Google Fonts/self-host/все, что вам нравится).

      3

      Полный список всех значков материалов содержится в Список значков матов: 900+ значков угловых материалов Арункумар Гуделли — 15 июля 2020 г.

      0

      Существует около 900+ иконок Angular Material, разделенных на 10+ категорий. Вы можете найти полный список из 900+ значков здесь.

      Вам необходимо загрузить шрифт CSS Material Icons в свой модуль:

       import {MatIconModule} from '@angular/material/icon'

      В вашем модуле, но при импорте:

       импорт: [(...), MatIconModule]

      Наконец, несколько примеров в вашем HTML:

       время_доступа
 
       дом
 
 дом

      0

      Зарегистрируйтесь или войдите в систему

      Зарегистрируйтесь с помощью Google

      Зарегистрироваться через Facebook

      Зарегистрируйтесь, используя электронную почту и пароль

      Опубликовать как гость

      Электронная почта

      Обязательно, но не отображается

      Опубликовать как гость

      Электронная почта

      Требуется, но не отображается

      Как использовать значки шрифтов Angular 11 Material

      Поиск

      Разумное использование значков может помочь передать значение элементов приложения и значительно улучшить взаимодействие с пользователем. Для тех из нас, кто разрабатывает с использованием Angular, у нас есть огромный выбор иконок благодаря иконкам Material. Это красиво оформленные символы для обычных действий и элементов для использования в Android, iOS и веб-приложениях. Материальные значки предоставляются с использованием двух разновидностей: шрифта и SVG. Как мы узнаем из этого урока, добавление значков материалов в ваши проекты Angular достаточно просто, и нет никаких оправданий тому, чтобы этого не делать! Сегодня мы сосредоточимся на иконках на основе шрифтов. Иконки SVG станут предметом следующей статьи.

      Чтобы узнать больше о Javascript, посетите Академию TechRepublic!

      Настройка тестового проекта

      Возможно, у вас уже есть проект, в который вы хотели бы добавить значки материалов, но для этого руководства мы создадим его с нуля. Вот команда для создания нового проекта с использованием Angular CLI:

       ng new angular-mat-icons-tutorial

      Затем вставьте компакт-диск в папку проекта angular-mat-icons-tutorial, и вы готовы начать!

      Установка библиотеки пользовательского интерфейса Angular Material

      Прежде чем мы сможем использовать значки материалов в нашем проекте, мы должны настроить библиотеку пользовательского интерфейса материалов. Вот как это сделать:

      1. Следующая команда добавит библиотеку пользовательского интерфейса материала angular:
         нг добавить @angular/material
      2. CLI теперь спросит, хотите ли вы включить пакеты Angular Material Typography и Animations

      Ответьте Да на оба вопроса. Все хорошо!

      Импорт модуля значка материала

      Каждый компонент Материала объявлен в своем собственном модуле. Таким образом, вы можете включить столько компонентов, сколько вам нужно. Мне лично нравится создавать отдельный модуль, посвященный компонентам материала angular, который включает только те компоненты, которые мне нужны. Вот как создать файл material.module.ts с помощью команды ng:

       ng g m shared/modules/material

      Обратите внимание, что «g m» — это сокращение от «generate module».

      Теперь перейдите к файлу shared/modules/material.module.ts, откройте его в своем любимом редакторе или IDE (сам я неравнодушен к VS Code) и добавьте MatIconModule следующим образом:0005

       импорт {NgModule} из '@angular/core';
импортировать {CommonModule} из '@angular/common';
импортировать {MatIconModule} из '@angular/material/icon';

константные модули материала = [
  MatIconModule
];

@NgModule({
  объявления: [],
  импорт: [
    общий модуль,
    . ..материалмодули
  ],
  экспорт: [
    ...материалмодули
  ]
})
экспорт класса MaterialModule {}

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

      Последний шаг — импорт нашего модуля MaterialModule в файл app.module.ts. Это даст всем компонентам приложения доступ к компонентам Material.

       import {NgModule} из '@angular/core';
импортировать {BrowserModule} из '@angular/platform-browser';
импортировать {AppComponent} из './app.component';
импортировать {BrowserAnimationsModule} из '@angular/platform-browser/animations';
импортировать { MaterialModule } из './shared/modules/material/material.module';

@NgModule({
  декларации: [
    AppComponent
  ],
  импорт: [
    БраузерМодуль,
    BrowserAnimationsModule,
    МатериалМодуль
  ],
  провайдеры: [],
  начальная загрузка: [AppComponent]
})
экспортировать класс AppModule { }

      Импорт шрифтов и темы Angular Material

      Важно помнить, что Angular Material использует шрифт для отображения своих значков. Если вы откроете файл index.html, вы должны увидеть две ссылки на шрифты googleapis:

       

<голова>
  <мета-кодировка="utf-8">
  Учебное пособие по Angular MatIcons
  <база href="/">
  
  
  
  
  

<тело>
  <приложение-корень>

      Помните, как мы выбирали тему, когда устанавливали библиотеку Angular Material. Чтобы использовать эту тему, нам нужно импортировать ее в наш файл styles.css, styles.scss или styles.sass, в зависимости от того, какой тип стиля вы выбрали ранее. Хотя это и не является обязательным требованием для Mat-Icons, стиль играет ключевую роль для многих других компонентов материала. Вам нужно добавить оператор @import:

       /* Вы можете добавлять глобальные стили в этот файл, а также импортировать другие файлы стилей */
@import "~@angular/material/prebuilt-themes/indigo-pink.css";

html, тело { высота: 100%; }
тело { поле: 0; семейство шрифтов: Roboto, "Helvetica Neue", без засечек; }

      Включение значков материалов в компонент

      Теперь мы готовы использовать значки материалов в наших компонентах! Для простоты мы просто обновим страницу app.component.html, добавив несколько значков удовлетворенности пользователей:

       
      Как бы вы оценили значки Angular Material Icons?
      

sentiment_very_dissatisfied
  
sentiment_dissatisfied
  
sentiment_neutral
  
sentiment_satisfied
  
sentiment_very_satisfied

      Чтобы просмотреть вышеуказанное содержимое в браузере, введите команду ng serve и перейдите по адресу http://localhost:4200/ в выбранном вами браузере.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *