CODEWITHSUNDEEP
angularangular2-material
Werner Wiking
Werner Wiking

Reputation: 1

angular2-material 2 icons are not shown

I am working on an Angular 2 project, using Material 2. For some reason icons are not shown, just what's supposed to be the "key" of the icon as text.

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

I tried several ways:

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

I guess I tried about 5 more permutations, but all with the same result. I see the button, but with text on it. Just the icon alone also did not display in any of these approaches.

Upvotes: 0

Views: 3394

Answers (3)

Brahmmeswara Rao Palepu
Brahmmeswara Rao Palepu

Reputation: 199

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

Upvotes: 0

Werner Wiking
Werner Wiking

Reputation: 1

As J J B pointed out, the particular issue on this one was a wrong kind of quotes when including the google css in the index.html (that was a copy-paste error).

More important thing to take away is the other thing J J B said - @angular2-material is deprecated.

Upvotes: 0

J J B
J J B

Reputation: 9260

You should be using @angular/material now, @angular2-material is deprecated. See 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 {

    }

Just also noticed that you are using ” instead of " in your CSS link for the font.

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

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

Upvotes: 7

Related Questions