Angular Material'de <md-icon> nasıl kullanılır?

Bu çalışmadığı için Materyal simgelerini nasıl kullanacağımı merak ediyordum:

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

Simge özniteliğine parametre olarak verilen yolda bir sorun var sanırım. Bu simge klasörünün gerçekte nerede olduğunu bilmek istiyorum.

Diğer cevaplar endişemi gidermediği için kendi cevabımı yazmaya karar verdim.

md-iconYönergenin icon özniteliğinde verilen yol , statik dosya dizininizde bir yerde bulunan bir .png veya .svg dosyasının URL'sidir. Bu nedenle, bu dosyanın doğru yolunu simge özelliğine koymanız gerekir. ps, sunucunuzun hizmet verebilmesi için dosyayı doğru dizine koyar.

md-iconÖnyükleme simgeleri gibi olmadığını unutmayın . Şu anda sadece bir .svg dosyasını gösteren bir yönergedir.

Güncelleme

Bu sorunun gönderilmesinden bu yana açısal malzeme tasarımı çok değişti.

Şimdi kullanmanın birkaç yolu var md-icon

İlk yol, SVG simgelerini kullanmaktır.

<md-icon md-svg-src = '<url_of_an_image_file>'></md-icon>

Misal:

<md-icon md-svg-src = '/static/img/android.svg'></md-icon>

veya

<md-icon md-svg-src = '{{ getMyIcon() }}'></md-icon>

: getMyIcontanımlanmış bir yöntem nerede $scope.

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

bunu kullanmak için, $mdIconProvideruygulamanızı svg simge kümeleri ile yapılandırmak için hizmete ihtiyacınız vardır.

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

İkinci yol, yazı tipi simgelerini kullanmaktır.

<md-icon md-font-icon="android" alt="android"></md-icon>

<md-icon md-font-icon="fa-magic" class="fa" alt="magic wand"></md-icon>

bunu yapmadan önce yazı tipi kitaplığını bu şekilde yüklemelisiniz ..

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

veya bitişik harflerle yazı tipi simgelerini kullanın

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

Daha fazla ayrıntı için

Angular Material mdIcon Direktifi belgeleri

$ mdIcon Hizmet Belgeleri

$ mdIconProvider Hizmet Belgeleri

Bugünün en basit yolu, Google Yazı Tiplerinden Materyal Simgeleri yazı tipini istemektir, örneğin HTML başlık etiketinizde:

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

veya stil sayfanızda:

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

ve sonra md-icon yönergesinde açıklandığı gibi bitişik harflerle yazı tipi simgesi olarak kullanın . Örneğin:

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

Simgelerin / bitişik harflerin tam listesi https://www.google.com/design/icons/ adresindedir.

Aslında şimdi kameradan çalışıyor.

bower install material-design-icons --save

37,1 KB indirir. Ardından çıkarır ve yükler. Bower_components klasöründe material-design-icons adlı bir klasör göreceksiniz. Toplam boyut yaklaşık 299 KB'tır

md-simgeleri henüz açısal malzemenin çardak sürümünde değil. Polymer'ın simgelerini kullanıyorum , muhtemelen yine de aynı olacaklar.

bower install polymer/core-icons

Kolay yol: aşağıdaki CDN'yi kullanın:

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

Angularjs uygulamanıza ngMdIcons enjekte edin:

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

Html'nizde ng-md-icon direktifini kullanın, css aracılığıyla dolgu rengini belirtin:

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

Kaynak: https://klarsys.github.io/angular-material-icons/

Son sürümlerinde adında bir yönerge var md-icon

<md-icon icon="img/icons/ic_refresh_24px.svg"></md-icon>

Tüm md-önekler artıkmat-Bunu yazarken öneklerdir!

Bunu html başlığınıza koyun:

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

Modülümüze aktarın:

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

Kodunuzda kullanın:

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

İşte en son belgeler:

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>

kaynak: https://material.angularjs.org/#/demo/material.components.button

Benzer kullanarak
css ve yazı tipini aynı yerde kullanın

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