Angular Material md-icon error No provider for Http

Question

When using <md-icon> I get this error:

ORIGINAL EXCEPTION: No provider for Http!

So I added HTTP_PROVIDERS to my component and it solved it. So my question... Why do I need to add HTTP_PROVIDERS to my component to get <md-icon> to work even though I'm not using HTTP_PROVIDERS in my app otherwise?!

Here's my working component. Removing HTTP_PROVIDERS from the providers array throws the above error.

import { Component } from '@angular/core';
import { HTTP_PROVIDERS } from '@angular/http';
import { MdIcon, MdIconRegistry } from '@angular2-material/icon';

@Component({
  moduleId: module.id,
  selector: 'foo-app',
  template: `<md-icon>face</md-icon>`,
  directives: [ MdIcon ],
  providers: [MdIconRegistry, HTTP_PROVIDERS]
})
export class FooAppComponent {
  title = 'Material 2 Foo App';
}

One other note, this line will display the icon with no Http error and no need for HTTP_PROVIDERS:

<i class="material-icons">face</i>

Does a child of this component use `@angular/http`? If so, HTTP_PROVIDERS is required. It may be required even if it's imported and not used. — trey-jones, May 25 '16 at 17:20
This is the base App component - no other components. Also, when I remove `HTTP_PROVIDERS` from provider array, I also remove the import, so that's not the issue. This is a strange one. — jboothe, May 25 '16 at 17:22

Dalorzo · Answer 1 · 2020-02-07T18:39:35.887

4

Angular 7

For me the solution to this error was to add MatIconRegistry to providers on my APP module:

@NgModule({
  declarations: [..],
  imports: [
   ..,MatIconModule,
    HttpClientModule,
   ..
  ],
  providers:[  MatIconRegistry ],
  exports: [..]
})
export class SomeModule { }

edited Feb 07 '20 at 18:39

answered Oct 17 '19 at 22:03

Dalorzo

19,834
7
55
102

Adding MatIconRegistry in the list of providers helped fix the issue. Thanks! – deepa Jan 20 '20 at 01:31

score 3 · Accepted Answer · answered May 25 '16 at 17:24

Looking into the source code a bit for angular2-material, md-icon depends on angular2's Http which is why you're seeing the need for HTTP_PROVIDERS.

heres a link to the source: https://github.com/angular/material2/blob/master/src/components/icon/icon.ts

in /src/components/icon/icon.ts, the class requires MdIconRegistry with MdIcon having the constructor:

constructor(
  private _element: ElementRef,
  private _renderer: Renderer,
  private _mdIconRegistry: MdIconRegistry) { }

and MdIconRegistry requires Http with MdIconRegistry having the constructor:

  constructor(private _http: Http) {}

I guess Http is used to perhaps get icons from a url? So if you dig a few levels down into the source code, you can find Http in there.

There is a call to `` in the index page, so perhaps `HTTP_PROVIDERS` is needed to call that url. :/ — jboothe, May 25 '16 at 17:29

score 1 · Answer 3 · answered May 25 '16 at 17:32

1

Looking at the source reveals that MdIcon uses MdIconRegistry which uses Http to load the icon. This is also mentioned in a comment for MdIcon.

It still seems strange that that library is not self contained, but for now that seems to be the way it is.

answered May 25 '16 at 17:32

trey-jones

3,329
1
27
35

score 0 · Answer 4 · answered Nov 23 '16 at 07:55

0

Using angular 2.1.0 and angular material 2.0.0-alpha.10 do the following:

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

@NgModule({
  imports: [
    MaterialModule.forRoot(),
  ]
})

answered Nov 23 '16 at 07:55

mkaj

3,421
1
31
23

Angular Material md-icon error No provider for Http

4 Answers4