Question

我正在使用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个排列，但都有相同的结果。我看到了按钮，但上面有文字。仅仅图标也没有显示在任何这些方法中。

Answer 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/

Answer 2

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

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

Answer 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.............

angular2-material 2图标未显示

3 个答案: