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

Ответ 1

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

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

Помните, что 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 Документация по материалам mdIcon

$mdIcon Документация по обслуживанию

$mdIconProvider Service Документация

Ответ 2

Простейшим способом сегодня было бы просто запросить шрифт 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/

Ответ 3

Теперь он работает теперь от беседки.

bower install material-design-icons --save

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

Ответ 4

md-значки пока не находятся в выпуске angular. Я использовал Полимерные значки, они, вероятно, будут одинаковыми в любом случае.

bower install polymer/core-icons

Ответ 5

Простой способ: используйте следующий 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, указав fill-color через css:

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

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

Ответ 6

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

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

Ответ 7

Все префиксы 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

Ответ 8

<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

Ответ 9

Используя, например, использовать 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;
}