angular2-material 2 图标未显示答案

【问题标题】：angular2-material 2 icons are not shownangular2-material 2 图标未显示
【发布时间】：2016-12-10 22:28:02
【问题描述】：

我正在使用 Material 2 开发一个 Angular 2 项目。由于某种原因，图标没有显示，只是图标的“键”应该是文本。

app.module:

  ...    
    import {MdButtonModule} from "@angular2-material/button";
    import {MdIconModule, MdIconRegistry} from "@angular2-material/icon";
    ...

    @NgModule({
      declarations: [AppComponent,... CollapseableComponent],
      imports: [... MdButtonModule, MdIconModule, MdInputModule],
      providers: [{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
      }, ... MdIconRegistry],
      bootstrap: [AppComponent]
    })
    export class AppModule {

    }

index.html:

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

我尝试了几种方法：

  <button md-fab> <md-icon>add</md-icon></button>
    <button md-fab> <md-icon class="md-elevation-z1">create</md-icon></button>
    <button md-icon-button>add</button>

我想我又尝试了大约 5 种排列，但结果都一样。我看到了按钮，但上面有文字。只是图标本身也没有在这些方法中显示。

【问题讨论】：

标签： angular angular2-material

【解决方案1】：

您现在应该使用@angular/material，@angular2-material 已弃用。见changelog

app.module:

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


    @NgModule({
      declarations: [AppComponent,... CollapseableComponent],
      imports: [... MaterialModule.forRoot()],
      providers: [{
        provide: LocationStrategy,
        useClass: HashLocationStrategy
      }, ...],
      bootstrap: [AppComponent]
    })
    export class AppModule {

    }

刚刚还注意到您在 CSS 链接中使用 ” 而不是 " 字体。

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

Plunker： http://embed.plnkr.co/lAXjoXHZ4YdNgDOMUjPB/

【讨论】：

嘿，非常感谢您指出弃用！我也刚刚发现错误的字符复制和粘贴问题。这是他问题的根源。很尴尬的一个。干杯！
@WernerWiking 很高兴对您有所帮助，我总是在每个新版本上查看 GitHub 上的更改日志，看看有什么新内容，当由于 Alpa 阶段而缺少文档时，它真的可以提供帮助。如果您认为这是正确答案，请标记为已接受，单击答案旁边的复选标记将其从空心切换为绿色。
MaterialModule 现已弃用
@epiphanatic 是的，这是正确的，目前仍然可用，但带有弃用警告。非常欢迎您使用最新的指南来编辑我的答案，如果不是，我会在我使用计算机时进行正确的更改。

【解决方案2】：

正如 J J B 所指出的，在 index.html 中包含 google css 时，这个问题的特殊问题是引用错误（这是一个复制粘贴错误）。

更重要的一点是 J J B 说的另一件事 - @angular2-material 已被弃用。

【讨论】：

【解决方案3】：

We have to follow the steps in ng2-image-viewer  

https://www.npmjs.com/package/ng2-image-viewer

After complete those steps, we have to include material icons link in index.html

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

//For Material icons add code in style.css file They taken Opacity as 0 we can override to 1 then icons will display

.inline-icon > div > .tooltip:first-child {
    pointer-events: none;
  }

  .options-image-viewer > .tooltip {
    opacity: 1 !important;
    pointer-events: visible !important;
  }

  .inline-icon, .image-gallery-2 {
    background-color: #222B38 !important;
  }

Wow, It's working fine.............

【讨论】：