Question

我正在玩角4和材料设计。没有使用md-icon-button的困难。我希望只有“检查”图标[没有这个灰色笨重的“经典”按钮]。奇怪的图标适用于菜单项。它必须是简单的东西，但无法找到原因。

main.html中：

<div class="menuBar" style="margin-left: 5px">    
  <button md-icon-button [mdMenuTriggerFor]="menu">
    <md-icon>check</md-icon>
  </button>
</div>

<md-menu #menu="mdMenu">
  <button md-menu-item>
    <md-icon>voicemail</md-icon>
    <span>Add album</span>
  </button>
</md-menu>

<div class="container">
  <md-grid-list cols="4" rowHeight="100px" md-gutter="12px" md-gutter-gt-sm="8px">
    <md-grid-tile (click)="clickedOnTile(tile.text)"
                  *ngFor="let tile of tiles"
                  [colspan]="tile.cols"
                  [rowspan]="tile.rows"
                  [style.background]="tile.color">
      {{tile.text}}
    </md-grid-tile>
  </md-grid-list>
</div>

main.grid.ts：

import {Component} from "@angular/core";
import {MdDialog, MdDialogRef, MD_DIALOG_DATA} from '@angular/material';
import {Album} from "../album/album";

@Component({
  templateUrl: './main.html',
  selector: 'album-grid',
})
export class MainGrid {


  constructor(public dialog: MdDialog) {
  }

  tiles = [
    {text: 'One', cols: 3, rows: 1, color: 'lightblue'},
    {text: 'Two', cols: 1, rows: 2, color: 'lightgreen'},
    {text: 'Three', cols: 1, rows: 1, color: 'lightpink'},
    {text: 'Four', cols: 2, rows: 1, color: '#DDBDF1'},
  ];

  clickedOnTile(item: String): void {
    console.log('has been cliecked: ' + item)
    let tile = this.dialog.open(Album, {
      data: {name: item}
    })
  }
}

正确呈现语音邮件的图标：

但菜单[check]的那个看起来像这样：

我已添加：

@import "https://fonts.googleapis.com/icon?family=Material+Icons";

进入style.css

我的app.module：

import {NgModule} from '@angular/core';
import {AppComponent} from './app.component';
import {AlbumService} from "./service/album.service";
import {AlbumUtils} from "./service/album.utils";
import {MainGrid} from "./grid/main.grid";
import {HttpModule} from "@angular/http";
import {AppRoutingModule} from "./app-routing.module";
import {BrowserModule} from '@angular/platform-browser';
import {BrowserAnimationsModule} from '@angular/platform-browser/animations';
import {MdDialogModule, MdGridListModule, MdMenuModule,MdIconModule,MdIconRegistry} from '@angular/material';
import {Album} from "./album/album";
import {NgbCarouselModule, NgbModule} from '@ng-bootstrap/ng-bootstrap';

@NgModule({
  declarations: [
    AppComponent,
    MainGrid,
    Album
  ],
  imports: [
    AppRoutingModule,
    BrowserModule,
    HttpModule,
    BrowserModule,
    BrowserAnimationsModule,
    MdGridListModule,
    MdDialogModule,
    MdMenuModule,
    MdIconModule,
    NgbModule.forRoot()
  ],
  entryComponents:[Album],
  providers: [AlbumService, AlbumUtils,MdIconRegistry],
  bootstrap: [AppComponent]
})
export class AppModule {
}

的package.json：

 "dependencies": {
    "@angular/animations": "^4.2.4",
    "@angular/cdk": "github:angular/cdk-builds",
    "@angular/common": "^4.2.4",
    "@angular/compiler": "^4.2.4",
    "@angular/core": "^4.2.4",
    "@angular/flex-layout": "^2.0.0-beta.9",
    "@angular/forms": "^4.2.4",
    "@angular/http": "^4.2.4",
    "@angular/material": "github:angular/material2-builds",
    "@angular/platform-browser": "^4.2.4",
    "@angular/platform-browser-dynamic": "^4.2.4",
    "@angular/router": "^4.2.4",
    "@ng-bootstrap/ng-bootstrap": "^1.0.0-beta.3",
    "bootstrap": "^4.0.0-alpha.5",
    "core-js": "^2.4.1",
    "rxjs": "^5.4.2",
    "zone.js": "^0.8.14"
  }

Answer 1

要关闭。

我还没有将MdButtonModule添加到导入列表中。

md-icon-button未正确呈现

1 个答案: