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


102

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

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

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

Ответы:


151

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

Путь, указанный в атрибуте значка 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


1
Замечание о лигатурах: используйте символы подчеркивания вместо дефисов. Вероятно, это задокументировано где-то в ваших дополнительных подробных ссылках, но ни у кого нет времени на это. ;-)
Olson.dev

Как правильно их раскрасить?
theblang 07

@mattblang, если вы используете их как значок шрифта, то это просто шрифт. Таким образом, установка цвета текста в css (например, {color: red}) раскрасит их.
tanou

1
Именно то, что мне нужно. Я боролся со стилем при использовании <i class='material-icons'>icon_name</i>, но md-font-libraryотлично решил свою проблему.
Питер VDE

Почему использование переменной в md-icon не работает? например, <md-icon md-font-library = "material-icons"> {{user.type}} </md-icon> .. в данном случае user.type = "face" и при использовании в качестве текста он работает < md-icon md-font-library = "material-icons"> лицо </md-icon>
mariomol

31

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


как добавить иконку на кнопку?
Александр Миллс

28

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

bower install material-design-icons --save

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


20
А как тогда пользоваться?
Эрнст Эрнст


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, указав цвет заливки через css:

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

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


2
его раздражает ng-mdне центр значка в кнопках значка, как это делает md-icon.
Мустафа

да вот такая же проблема. в основном вам придется уточнять позиции с помощью css. position:relative;а затем переместите элемент или контейнер svg в нужное by left-top-right-bottomвам положение.
Аскан


1

Все 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


OP использует AngularJS Material.
Эдрик


0

Используя подобное,
используйте 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;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.