web-dev-qa-db-ja.com

angular 2つの素材アイコンを使用する

私はangular material 2を使用して私のウェブサイトにアイコンを表示しようとしていますが、少し混乱しています。

マテリアル2のgithubリポジトリのデモから、これが機能するはずです。

https://github.com/angular/material2/blob/master/src/demo-app/icon/icon-demo.ts

私はそれを使用しようとしましたが、アイコンはまったく表示されません。

これは私がそれを設定する方法です：

app.component.ts

import {MdIcon, MdIconRegistry} from '@angular2-material/icon/icon';

@Component({
  ...
  encapsulation: ViewEncapsulation.None,
  viewProviders: [MdIconRegistry],
  directives: [MdIcon],
})
export class MyComponent{
  constructor(private router: Router,
              private JwtService:JwtService,
              mdIconRegistry: MdIconRegistry){
    mdIconRegistry.addSvgIconSetInNamespace('core', 'fonts/core-icon-set.svg')
  }
}

およびテンプレート..

<md-icon>home</md-icon>

ページはエラーなしでロードされますが、アイコンは表示されません。何が間違っていたのでしょうか？

angularangular-material
21
TheUnreal

MdIconを使用するには、対応するcssファイルを含める必要があります。コードでは、GoogleのMaterial Iconsであるデフォルトのフォントを使用しています。

angular-material2 repo から：

デフォルトでは、 マテリアルアイコンフォント が使用されます。 （リンクで説明されているように、フォントとそのCSSを読み込むためにHTMLを含める必要があります）。

単純に、次のようにindex.htmlにcssを含めるだけです。

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

または、公式リポジトリに記載されている他のインポート方法を選択できます。

http://google.github.io/material-design-icons/#icon-font-for-the-web

32
Abdulrahman

アイコンスペースを分離して使用する（たとえば、ファイルのアップロード）には、アンダースコア_を使用する必要があることを知っておく価値があります。例えば：

<md-icon>file_upload</md-icon>
16
Milso

@ngModule Angular RC5構文は以下のようになります：

app-example-module.ts

import { MdIconModule, MdIconRegistry } from '@angular2-material/icon';

@NgModule({
    imports: [
        MdIconModule
    ]
    providers: [
        MdIconRegistry
    ]
})

export class AppExampleModule {
    //
}

app-example-component.ts

@Component({

    selector: 'app-header',
    template: `<md-icon svgIcon="close"></md-icon>`
})


export class AppExampleComponent
{
    constructor(private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon('close', '/icons/navigation/ic_close_36px.svg');
    }
}
13
user991

style.css内で、以下をコピーして貼り付けます：---

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

そして次のように使用します：

<md-icon>menu</md-icon>
          ^--- icon name
11
Deepak swain

angular 4.3.3 with @ angular/material 2.0.0-beta-7では、URLをサニタイズする必要もあります。

import { DomSanitizer } from '@angular/platform-browser';

export class AppComponent
{
    constructor(
        private domSanitizer: DomSanitizer,
        private mdIconRegistry: MdIconRegistry) {
        mdIconRegistry.addSvgIcon('Twitter', domSanitizer.bypassSecurityTrustResourceUrl('/assets/icons/Twitter.svg'));
    }
}
5
mkaj

オフライン/ローカルで作業するには（サーバーからCSSを提供）：

  1. npm install material-design-icons --save
  2. src/styles.cssに@import "~material-design-icons/iconfont/material-icons.css";を追加します
2
Valentin Bossi

これが方法です、私は試しましたが、うまくいきます。

mdIconRegistry.addSvgIcon('slider', sanitizer.bypassSecurityTrustResourceUrl('./assets/controls/slider.svg'));

インスタンスmdIconRegistryはDI経由で利用でき、addSvgIconメソッドを使用してカスタムsvgを追加します。次に、テンプレートで<md-icon svgIcon="slider">を使用します。

0
Malkeet Singh

Index.htmlに次の行を追加するだけです

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