Jak używać <md-icon> w Angular Material?

102

Zastanawiałem się, jak używać ikon Material, ponieważ to nie działa:

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

Wydaje mi się, że wystąpił problem ze ścieżką podaną jako parametr do atrybutu ikony. Chciałbym wiedzieć, gdzie właściwie jest ten folder ikon?

Adil Malik
źródło

Odpowiedzi:

151

Ponieważ inne odpowiedzi nie dotyczyły mojego problemu, zdecydowałem się napisać własną odpowiedź.

Ścieżka podana w atrybucie icon md-icondyrektywy 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-iconto 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 getMyIconjest metodą zdefiniowaną w $scope.

lub <md-icon md-svg-icon="social:android"></md-icon>

Aby z tego skorzystać, musisz $mdIconProviderskonfigurować 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

Adil Malik
źródło
1
Krótka uwaga na temat ligatur: użyj podkreślenia zamiast łączników. Prawdopodobnie jest to udokumentowane gdzieś w linkach do dalszych szczegółów, ale nikt nie ma na to czasu. ;-)
Olson.dev
Jaki jest właściwy sposób ich pokolorowania?
theblang
@mattblang, jeśli używasz ich jako ikony czcionki, to jest to tylko czcionka. Zatem ustawienie koloru tekstu w css (np. {Color: red}) spowoduje ich pokolorowanie.
tanou
1
Dokładnie to, czego potrzebowałem. Walczyłem ze stylem podczas używania <i class='material-icons'>icon_name</i>, ale md-font-libraryrozwiązałem swój problem doskonale.
Pieter VDE
Dlaczego używanie zmiennej w md-icon nie działa? jak <md-icon md-font-library = "material-icons"> {{user.type}} </md-icon> .. w tym przypadku user.type = "face" i używając jako tekstu to działa < md-icon md-font-library = "material-icons"> twarz </md-icon>
mariomol
31

Najprostszym dzisiejszym sposobem byłoby po prostu zażądanie czcionki Material Icons z Google Fonts, na przykład w tagu nagłówka HTML:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

lub w swoim arkuszu stylów:

@import url(https://fonts.googleapis.com/icon?family=Material+Icons);

a następnie użyj jako ikony czcionki z ligaturami, jak wyjaśniono w dyrektywie md-icon . Na przykład:

<md-icon aria-label="Menu" class="material-icons">menu</md-icon>

Pełna lista ikon / ligatur znajduje się pod adresem https://www.google.com/design/icons/

Jesús Carrera
źródło
jak dodać ikonę do przycisku?
Alexander Mills,
28

To faktycznie działa teraz z altany.

bower install material-design-icons --save

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

rahul
źródło
20
A jak to wykorzystać?
Ernst Ernst,
6

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.

bower install polymer/core-icons
Ryan Metin
źródło
5

Prosty sposób: użyj następującego CDN:

<script src="//cdnjs.cloudflare.com/ajax/libs/angular-material-icons/0.5.0/angular-material-icons.min.js"></script> 

Wstrzyknij ngMdIcons do swojej aplikacji angularjs:

angular.module('demoapp', ['ngMdIcons']);

Użyj dyrektywy ng-md-icon w swoim html, określając kolor wypełnienia przez css:

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

Źródło: https://klarsys.github.io/angular-material-icons/

Asqan
źródło
2
jego irytujące ng-mdnie skupia ikony na przyciskach ikon, jak robi to md-icon.
Mustafa,
tak, ten sam problem tutaj. przeważnie będziesz musiał udoskonalić pozycje za pomocą css. position:relative;a następnie przenieś element lub kontener svg by left-top-right-bottomw lepsze miejsce, które chcesz.
Asqan,
3

W ich najnowszym wydaniu jest dyrektywa o nazwie md-icon

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>
sgimeno
źródło
4
bower zainstaluj material-design-icons github.com/google/material-design-icons
neofreko
5
Pobierz to, nie używaj bower. To 57MB
neofreko
1

Wszystkie md-przedrostki są teraz mat-przedrostkami w momencie pisania tego!

Umieść to w swojej głowie html:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Import w naszym module:

import { MatIconModule } from '@angular/material';

Użyj w swoim kodzie:

<mat-icon>face</mat-icon>

Oto najnowsza dokumentacja:

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

Joshua Michael Wagoner
źródło
OP używa materiału AngularJS.
Edric
0

Używając like,
użyj CSS i czcionki w tej samej lokalizacji

@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;
}
Kamlesh
źródło