md-icon md-list-icon在角度2中不顯示

我想在我用過的列表之前顯示一個圖標。md-icon md-list-icon在角度2中不顯示

不確定下面是否支持Angular2。

下面的模塊'MaterialModule'不是我需要的，我想是因爲刪除它後導致我工作。

如果我導入這個模塊，我得到：沒有導出的'MaterialModule'！

app.module.ts //不需要在這裏導入

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>

我的\ 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

修訂答：

的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中不顯示

回答

相關問題