[解決済み] Angular Materialで<md-icon>を使用するには？

質問

マテリアルのアイコンが使えないので、どうすればいいのか悩んでいます。

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

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

どのように解決するのですか？

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

のicon属性で指定されたパスは md-icon ディレクティブの icon 属性に指定されたパスは、静的ファイルディレクトリのどこかにある .png または .svg ファイルの URL になっています。したがって、icon 属性にそのファイルの正しいパスを記述する必要があります。p.s. サーバーがファイルを提供できるように、正しいディレクトリにファイルを置いてください。

覚えておきましょう 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);    
  });

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