md-icon md-list-iconが角2に表示されていません

私が好きだったリストの前にアイコンを表示したいと思います。md-icon md-list-iconが角2に表示されていません

以下がAngular2でサポートされているかどうかは不明です。

以下のモジュール 'MaterialModule'は必須ではありません。削除しても問題ないと思います。

私はこのモジュールをインポートすると、私は得る：いいえエクスポート 'MaterialModule'！が//ここ

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

imports: [ 
    MaterialModule 
...

index.htmlを

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

test.component.html

<md-list-item routerLink="2" routerLinkActive="active"> 
    <md-icon md-list-icon>face</md-icon> <!--Icon not displaying here!--> 

    <div fxFlex="10"></div> 
    <div *ngIf="sidenavWidth > 6" class="sidenav-item"> 
     <a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}}</a> 
    </div> 

    </md-list-item>

インポートする必要はありません

app.module.ts 0

私\ SRC \ index.htmlを

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Food4Smiles</title> <base href="/"> <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script> <link href="https://fonts.googleapis.com/icon?family=Material+Icon‌s" rel="stylesheet"> <link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="assets/static/hmicon.png"> </head> <body> <app-root></app-root> <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> </body> </html>

出典

2017-10-04 phyme

uは材料のアイコンのリンク '' '<リンクのhref =" https://fonts.googleapis.com/icon?family=Material+を追加したことを確認してくださいあなたのファイルにアイコン "rel =" stylesheet ">' '' –

'' '' '' .. –

私はインデックスhtmlにsrcリンクを含めた回答を更新しましたが、まだアイコンは反映されていません！ – phyme

UPDATED ANSWER：

index.htmlを

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

test.component.html

<md-list-item routerLink="2" routerLinkActive="active"> 
    <md-icon md-list-icon>face</md-icon> <!--Icon not displaying here!--> 

    <div fxFlex="10"></div> 
    <div *ngIf="sidenavWidth > 6" class="sidenav-item"> 
     <a *ngFor="let cat of categories; let i = index" href="javascript:; " class="list-group-item " (click)="getProducts(cat._id,i)">{{cat.category_name}} 
    </a> 
    </div> 

</md-list-item>

\ SRC \ index.htmlを

<!doctype html> 
<html> 

<head> 
    <meta charset="utf-8"> 
    <title>Food4Smiles</title> 
    <base href="/"> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.2/web-animations.min.js"></script> 
    <link href="https://fonts.googleapis.com/icon?family=Material+Icon‌s" rel="stylesheet"> 
    <link rel="stylesheet" href="https://bootswatch.com/flatly/bootstrap.css"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="icon" type="image/x-icon" href="assets/static/hmicon.png"> 
</head> 

<body> 
    <app-root></app-root> 
    <script src="https://code.jquery.com/jquery-3.2.1.js" integrity="sha256-DZAnKJ/6XZ9si04Hgrsxu/8s717jcIzLy3oi35EouyE=" crossorigin="anonymous"></script> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
</body> 

</html>

出典

2017-10-04 14:54:23 phyme

md-icon md-list-iconが角2に表示されていません

答えて

関連する問題