Angular Materialで<md-icon>を使用するには？

これが機能していないので、私はマテリアルのアイコンをどのように使用するのか疑問に思っていました：

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

icon属性のパラメーターとして指定されたパスに問題があると思います。このアイコンフォルダが実際にどこにあるのか知りたいのですが。

他の回答は私の懸念に対応していなかったので、私は自分の回答を書くことにしました。

md-iconディレクティブのicon属性で指定されたパスは、静的ファイルディレクトリのどこかにある.pngまたは.svgファイルのURLです。したがって、そのファイルの正しいパスを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>

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

2番目の方法は、フォントアイコンを使用することです。

<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サービスのドキュメント

今日の最も簡単な方法は、たとえばHTMLヘッダータグで、Google FontsにMaterial Iconsフォントをリクエストすることです。

<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 KBをダウンロードします。次に、それを抽出してインストールします。bower_componentsフォルダーにmaterial-design-iconsというフォルダーが表示されます。合計サイズは約299KB

md-iconsは、angular-materialの限定リリースにはまだ含まれていません。私はPolymerのアイコンを使用してきましたが、おそらく同じです。

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> 

AngularJSアプリケーションにngMdIconsを挿入します：

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

HTMLでng-md-iconディレクティブを使用して、cssでfill-colorを指定します。

<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

like
use cssとfontを使用して同じ場所に

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