Як використовувати <md-icon> у кутовому матеріалі?

Мені було цікаво, як використовувати піктограми Матеріал, оскільки це не працює:

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

Я думаю, що існує проблема з доріжкою, заданою як параметр до атрибута значка. Я хотів би знати, де насправді знаходиться ця папка значків?

Оскільки інші відповіді не вирішили мого занепокоєння, я вирішив написати свою відповідь.

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

Пам'ятайте, md-iconце не так, як піктограми завантажувального пристрою. Наразі вони є лише директивою, яка показує файл .svg.

Оновлення

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

Зараз існує кілька способів використання 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>

Для більш детальної інформації зверніться до нашої

Документальна документація щодо директиви mdIcon углового матеріалу

$ mdIcon Служба документації

$ mdIconProvider Служба документації

Найпростішим способом сьогодні було б просто попросити шрифт Material Icons від шрифтів Google, наприклад, у тезі 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-піктограми ще не випущені з вугільного матеріалу. Я використовую іконки Полімера , вони, мабуть, все одно будуть однакові.

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, вказавши колір заповнення через css:

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

Джерело: https://klarsys.github.io/angular-material-icons/

В їх останньому випуску є директива під назвою 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>

Ось остання документація:

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

<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;
}