文章/答案/技术大牛

发布

社区首页 >问答首页 >md-图标md-列表-图标没有显示在角2

问md-图标md-列表-图标没有显示在角2
EN

Stack Overflow用户

提问于 2017-10-04 10:32:53

回答 1查看 42关注 0票数 0

我想在我用过的列表之前显示一个图标。

不确定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>

angular2-forms

回答 1

Stack Overflow用户

发布于 2017-10-04 14:54:23

更新答案：

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>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/46562713

复制

相似问题

问md-图标md-列表-图标没有显示在角2
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问md-图标md-列表-图标没有显示在角2EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问md-图标md-列表-图标没有显示在角2
EN