Ponieważ inne odpowiedzi nie dotyczyły mojego problemu, zdecydowałem się napisać własną odpowiedź.
Ścieżka podana w atrybucie icon md-icon
dyrektywy jest adresem URL pliku .png lub .svg, który znajduje się gdzieś w katalogu plików statycznych. Musisz więc umieścić właściwą ścieżkę do tego pliku w atrybucie ikony. ps umieść plik w odpowiednim katalogu, aby serwer mógł go obsłużyć.
Pamiętaj, md-icon
to nie jest jak ikony bootstrap. Obecnie są to tylko dyrektywy, które pokazują plik .svg.
Aktualizacja
Projektowanie materiałów kątowych bardzo się zmieniło od czasu opublikowania tego pytania.
Teraz jest kilka sposobów użycia md-icon
Pierwszym sposobem jest użycie ikon SVG.
<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>
Przykład:
<md-icon md-svg-src = '/static/img/android.svg'></md-icon>
lub
<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>
: gdzie getMyIcon
jest metodą zdefiniowaną w $scope
.
lub
<md-icon md-svg-icon="social:android"></md-icon>
Aby z tego skorzystać, musisz $mdIconProvider
skonfigurować aplikację za pomocą zestawów ikon 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);
});
Drugim sposobem jest użycie ikon czcionek.
<md-icon md-font-icon="android" alt="android"></md-icon>
<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>
zanim to zrobisz, musisz załadować bibliotekę czcionek w ten sposób.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
lub użyj ikon czcionek z ligaturami
<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>
Więcej informacji znajdziesz w naszym
Dokumentacja dyrektywy mdIcon dotyczącej materiałów kątowych
Dokumentacja serwisowa $ mdIcon
Dokumentacja usługi $ mdIconProvider
<i class='material-icons'>icon_name</i>
, alemd-font-library
rozwiązałem swój problem doskonale.Najprostszym dzisiejszym sposobem byłoby po prostu zażądanie czcionki Material Icons z Google Fonts, na przykład w tagu nagłówka HTML:
lub w swoim arkuszu stylów:
a następnie użyj jako ikony czcionki z ligaturami, jak wyjaśniono w dyrektywie md-icon . Na przykład:
Pełna lista ikon / ligatur znajduje się pod adresem https://www.google.com/design/icons/
źródło
To faktycznie działa teraz z altany.
Pobiera 37,1 KB. Następnie rozpakowuje i instaluje. Zobaczysz folder o nazwie Material-design-icons w folderze bower_components. Całkowity rozmiar to około 299 KB
źródło
Ikony md nie są jeszcze dostępne w wydaniu angular-material. Używam ikony polimer jest , oni prawdopodobnie być taka sama w każdym razie.
źródło
Prosty sposób: użyj następującego CDN:
Wstrzyknij ngMdIcons do swojej aplikacji angularjs:
Użyj dyrektywy ng-md-icon w swoim html, określając kolor wypełnienia przez css:
Źródło: https://klarsys.github.io/angular-material-icons/
źródło
ng-md
nie skupia ikony na przyciskach ikon, jak robi to md-icon.position:relative;
a następnie przenieś element lub kontener svgby left-top-right-bottom
w lepsze miejsce, które chcesz.W ich najnowszym wydaniu jest dyrektywa o nazwie
md-icon
źródło
Wszystkie
md-
przedrostki są terazmat-
przedrostkami w momencie pisania tego!Umieść to w swojej głowie html:
Import w naszym module:
Użyj w swoim kodzie:
Oto najnowsza dokumentacja:
https://material.angular.io/components/icon/overview
źródło
źródło: https://material.angularjs.org/#/demo/material.components.button
źródło
Używając like,
użyj CSS i czcionki w tej samej lokalizacji
źródło