Мне было интересно, как использовать значки Material, поскольку это не работает:
<material-icon icon = "/img/icons/ic_access_time_24px.svg"> </material-icon>
Я предполагаю, что проблема связана с параметром, указанным в качестве параметра атрибута значка. Я хотел бы знать, где эта папка на самом деле?
Поскольку другие ответы не касались моей озабоченности, я решил написать свой собственный ответ.
Путь, указанный в атрибуте значка директивы 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
Простейшим способом сегодня было бы просто запросить шрифт 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/
Теперь он работает теперь от беседки.
bower install material-design-icons --save
Он загружает 37,1 КБ. Затем он извлекает и устанавливает. Вы увидите папку с именем material-design-icons в папке bower_components. Общий размер составляет около 299 КБ.
md-значки пока не находятся в выпуске angular. Я использовал Полимерные значки, они, вероятно, будут одинаковыми в любом случае.
bower install polymer/core-icons
Простой способ: используйте следующий 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>
В их последнем выпуске есть директива под названием md-icon
<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
Все префиксы 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>
Вот последняя документация:
<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
Используя, например, использовать 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;
}