web-dev-qa-db-ja.com

Angular Materialで<md-icon>を使用する方法

これはうまくいかないので、私はMaterialのアイコンの使い方を考えていました：

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

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

angularjsmaterial-designangularjs-material
102
Adil Malik

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

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

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>

：getMyIconは$scopeで定義されているメソッドです。

または<md-icon md-svg-icon="social:Android"></md-icon>

これを使用するには、svg iconsetsを使ってアプリケーションを設定するための$mdIconProviderサービスが必要です。

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

149
Adil Malik

今日の最も簡単な方法は、例えばあなたの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/ にあります。

31
Jesús Carrera

それは実際には喧嘩から働きます。

bower install material-design-icons --save

37.1 KBがダウンロードされます。それから解凍してインストールします。 bower_componentsフォルダーにmaterial-design-iconsというフォルダーが表示されます。合計サイズは約299KBです

28
rahul

mDアイコンはまだ角度材料の大胆なリリースにはありません。私は Polymer's icons を使っています、とにかく同じでしょう。

bower install polymer/core-icons
6
Ryan Metin

簡単な方法：次の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/

5
Asqan

彼らの最新リリースではmd-iconと呼ばれるディレクティブがあります

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

これを書いている時点では、すべての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

1
Joshua Michael Waggoner

Likeを使って
cssとフォントを同じ場所に使用

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

0
Zhorzh Alexandr