Как использовать <md-icon> в Angular Material?

Question 1

Мне было интересно, как использовать значки материалов, так как это не работает:

<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon>

Я предполагаю, что существует проблема с путем, указанным в качестве параметра атрибута значка. Я хотел бы знать, где на самом деле находится эта папка с иконками?

Question 2

Поскольку другие ответы не касались моей проблемы, я решил написать свой собственный ответ.

Путь, указанный в атрибуте значка md-icon директивы, является URL-адресом файла .png или .svg, лежащего где-то в каталоге статических файлов. Таким образом, вы должны указать правильный путь к этому файлу в атрибуте значка. ps поместите файл в правильный каталог, чтобы ваш сервер мог его обслуживать.

Помните, md-iconэто не похоже на значки начальной загрузки. В настоящее время это просто директива, отображающая файл .svg.

Обновить

С момента публикации этого вопроса дизайн материалов Angular сильно изменился.

Теперь есть несколько способов использовать md-icon

Первый способ - использовать значки SVG.

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

Пример:

<md-icon md-svg-src = '/static/img/android.svg'></md-icon>

или

<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>

: где getMyIcon- метод, определенный в $scope.

или <md-icon md-svg-icon="social:android"></md-icon>

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

angular.module('appSvgIconSets', ['ngMaterial'])  
  .controller('DemoCtrl', function($scope) {})  
  .config(function($mdIconProvider) {
    $mdIconProvider
      .iconSet('social', 'img/icons/sets/social-icons.svg', 24)
      .defaultIconSet('img/icons/sets/core-icons.svg', 24);    
  });

Второй способ - использовать иконки шрифтов.

<md-icon md-font-icon="android" alt="android"></md-icon>

<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>

перед этим вы должны загрузить библиотеку шрифтов следующим образом ..

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

или используйте значки шрифтов с лигатурами

<md-icon md-font-library="material-icons">face</md-icon>

<md-icon md-font-library="material-icons">#xE87C;</md-icon>

<md-icon md-font-library="material-icons" class="md-light md-48">face</md-icon>

Для получения дополнительной информации посетите наш

Документация директивы Angular Material MDIcon

Сервисная документация $ mdIcon

Сервисная документация $ mdIconProvider

Question 3

Самый простой способ сегодня - просто запросить шрифт Material Icons у Google Fonts, например, в теге заголовка HTML:

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

или в вашей таблице стилей:

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

а затем использовать в качестве значка шрифта с лигатурами, как описано в директиве md-icon . Например:

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

Полный список значков / лигатур находится на https://www.google.com/design/icons/.

Question 4

Теперь он действительно работает из беседки.

bower install material-design-icons --save

Он загружает 37,1 КБ. Затем он извлекает и устанавливает. Вы увидите папку с именем material-design-icons в папке bower_components. Общий размер составляет около 299 КБ.

Question 5

md-icons еще не включены в версию angular-material bower. Я пользовался иконками Polymer , наверное, они все равно будут такими же.

bower install polymer/core-icons

Question 6

Простой способ: используйте следующий CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script>

Вставьте ngMdIcons в ваше приложение angularjs:

angular.module('demoapp', ['ngMdIcons']);

Используйте директиву ng-md-icon в своем html, указав цвет заливки через css:

<ng-md-icon icon="..." style="fill: ..." size="..."></ng-md-icon>

Источник: https://klarsys.github.io/angular-material-icons/

Question 7

В их последнем выпуске есть директива под названием md-icon

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

Question 8

Все md-префиксы сейчасmat- префиксами на момент написания этой статьи!

Поместите это в свою HTML-голову:

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

Импортируем в наш модуль:

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

Используйте в своем коде:

<mat-icon>face</mat-icon>

Вот последняя документация:

https://material.angular.io/components/icon/overview

Question 9

<md-button class="md-fab md-primary" md-theme="cyan" aria-label="Profile">
    <md-icon icon="/img/icons/ic_people_24px.svg" style="width: 24px; height: 24px;"></md-icon>
</md-button>

источник: https://material.angularjs.org/#/demo/material.components.button

Question 10

Используя подобное,
используйте CSS и шрифт в том же месте

@font-face {
    font-family: 'Material-Design-Icons';
    src: url('Material-Design-Icons.eot');
    src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
         url('Material-Design-Icons.woff2') format('woff2'),
         url('Material-Design-Icons.woff') format('woff'),
         url('Material-Design-Icons.ttf') format('truetype'),
         url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}