Encountering a console error while trying to utilize mdIcon

Question

Encountering a console error while trying to utilize mdIcon

I'm encountering an issue with Angular when trying to use mdIcon in my code. Here is the snippet that's causing trouble:

import {Component} from '@angular/core';
import {MdIcon} from '@angular2-material/icon';
@Component({
    selector: 'my-app',
    template: `
    <md-toolbar>
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>`,
    directives: [MdIcon,MdToolbar],

})
export class AppComponent {}

The error message states:

ORIGINAL EXCEPTION: No provider for MdIconRegistry! Error: DI Exception at NoProviderError.BaseException [as constructor] (exceptions.ts:14) at NoProviderError.AbstractProviderError [as constructor] (reflective_exceptions.ts:53) at new NoProviderError (reflective_exceptions.ts:85) at ReflectiveInjector_._throwOrNull (reflective_injector.ts:844) at ReflectiveInjector_._getByKeyDefault (reflective_injector.ts:873) at ReflectiveInjector_._getByKey (reflective_injector.ts:835) at ReflectiveInjector_.get (reflective_injector.ts:632) at ElementInjector.get (element_injector.ts:19) at DebugAppView._View_AppComponent0.createInternal (AppComponent.template.js:141) at DebugAppView.AppView.create (view.ts:110)

Anyone have insights on what I might be doing incorrectly in this scenario?

angular typescript angular-material

Answer 1

Answer №1

For the latest 2.0.0 release with material alpha 8-4 changes:

To make it work, you must add MdIconRegistry as a provider in your app.modules.ts file. Here's a working example:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import {
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    MdCheckboxModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdListModule,
    MdMenuModule,
    MdProgressBarModule,
    MdProgressCircleModule,
    MdRadioModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule
} from '@angular2-material';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,

        MdButtonModule,
        MdButtonToggleModule,
        MdCardModule,
        MdCheckboxModule,
        MdGridListModule,
        MdIconModule,
        MdInputModule,
        MdListModule,
        MdMenuModule,
        MdProgressBarModule,
        MdProgressCircleModule,
        MdRadioModule,
        MdSidenavModule,
        MdSliderModule,
        MdSlideToggleModule,
        MdTabsModule,
        MdToolbarModule,
        MdTooltipModule
    ],
    providers: [
        MdIconRegistry
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Remember to also install hammerjs + typings and include import 'hammerjs'; in your main.ts file if you wish to utilize md-slide-toggle and md-slider modules.

Answer 2

For the latest 2.0.0 release with material alpha 8-4 changes:

To make it work, you must add MdIconRegistry as a provider in your app.modules.ts file. Here's a working example:

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import {
    MdButtonModule,
    MdButtonToggleModule,
    MdCardModule,
    MdCheckboxModule,
    MdGridListModule,
    MdIconModule,
    MdInputModule,
    MdListModule,
    MdMenuModule,
    MdProgressBarModule,
    MdProgressCircleModule,
    MdRadioModule,
    MdSidenavModule,
    MdSliderModule,
    MdSlideToggleModule,
    MdTabsModule,
    MdToolbarModule,
    MdTooltipModule
} from '@angular2-material';

import { AppComponent } from './app.component';

@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,

        MdButtonModule,
        MdButtonToggleModule,
        MdCardModule,
        MdCheckboxModule,
        MdGridListModule,
        MdIconModule,
        MdInputModule,
        MdListModule,
        MdMenuModule,
        MdProgressBarModule,
        MdProgressCircleModule,
        MdRadioModule,
        MdSidenavModule,
        MdSliderModule,
        MdSlideToggleModule,
        MdTabsModule,
        MdToolbarModule,
        MdTooltipModule
    ],
    providers: [
        MdIconRegistry
    ],
    bootstrap: [AppComponent]
})
export class AppModule { }

Remember to also install hammerjs + typings and include import 'hammerjs'; in your main.ts file if you wish to utilize md-slide-toggle and md-slider modules.

Answer 3

Answer №2

To ensure proper functionality, make sure to include it in either the providers or viewProviders section and properly register icons or iconsets.

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

@Component({
    selector: 'my-app',
    template: `
    <md-toolbar>
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>`,
    directives: [MdIcon,MdToolbar],
    viewProviders: [MdIconRegistry],
})
export class AppComponent {
    constructor(mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
            .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
            .registerFontClassAlias('fontawesome', 'fa');
    }
}

Answer 4

To ensure proper functionality, make sure to include it in either the providers or viewProviders section and properly register icons or iconsets.

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

@Component({
    selector: 'my-app',
    template: `
    <md-toolbar>
      <md-icon class="demo-toolbar-icon">menu</md-icon>
      <span>Default Toolbar</span>

      <span class="demo-fill-remaining"></span>

      <md-icon>code</md-icon>
    </md-toolbar>`,
    directives: [MdIcon,MdToolbar],
    viewProviders: [MdIconRegistry],
})
export class AppComponent {
    constructor(mdIconRegistry: MdIconRegistry) {
        mdIconRegistry
            .addSvgIcon('thumb-up', '/demo-app/icon/assets/thumbup-icon.svg')
            .addSvgIconSetInNamespace('core', '/demo-app/icon/assets/core-icon-set.svg')
            .registerFontClassAlias('fontawesome', 'fa');
    }
}

Answer 5

Answer №3

To include the MaterialRootModule in your app.module.ts file, simply import it like this:

import { MaterialModule } from '@angular/material';
@NgModule({
  imports: [
    MaterialModule.forRoot(),
  ],
})

Answer 6

To include the MaterialRootModule in your app.module.ts file, simply import it like this:

import { MaterialModule } from '@angular/material';
@NgModule({
  imports: [
    MaterialModule.forRoot(),
  ],
})

Answer 7

Answer №4

Utilize Http module. View this forum thread

import {HTTP_PROVIDERS} from '@angular/http';
import {MdIcon, MdIconRegistry} from  '@angular2-material/icon';
@Component({
    template:
      <md-toolbar>
         <md-icon class="demo-toolbar-icon">menu</md-icon>
         <span>Default Toolbar</span>
         <span class="demo-fill-remaining"></span>
         <md-icon>code</md-icon>
    </md-toolbar>`,
    directives:[MdIcon],
    providers: [HTTP_PROVIDERS, MdIconRegistry]
})

Answer 8

Utilize Http module. View this forum thread

import {HTTP_PROVIDERS} from '@angular/http';
import {MdIcon, MdIconRegistry} from  '@angular2-material/icon';
@Component({
    template:
      <md-toolbar>
         <md-icon class="demo-toolbar-icon">menu</md-icon>
         <span>Default Toolbar</span>
         <span class="demo-fill-remaining"></span>
         <md-icon>code</md-icon>
    </md-toolbar>`,
    directives:[MdIcon],
    providers: [HTTP_PROVIDERS, MdIconRegistry]
})

Answer 9

Answer №5

To easily incorporate standard icons into your website, simply add the font to your HTML by using a CDN link:


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

For other methods, refer to the documentation:

Don't forget to include the material module in the imports section of your NgModule configuration, like you would with any other material package.

Answer 10

To easily incorporate standard icons into your website, simply add the font to your HTML by using a CDN link:


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

For other methods, refer to the documentation:

Don't forget to include the material module in the imports section of your NgModule configuration, like you would with any other material package.

Encountering a console error while trying to utilize mdIcon

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Implementing experimental decorators and type reconciliation in TypeScript - A step-by-step guide

tRPC asynchronous mutation does not have a return value

Issue 2339: Dealing with || and Union Types

Why React's setState is only returning the last item when a list is saved to a variable

The property 'x' cannot be found when declaring two different return types

Running into memory limits with JavaScript on Angular 7 when integrating with Azure DevOps

ERROR TS1086: A declaration of an accessor within an ambient context is not allowed. Accessor for firebaseUiConfig(): NativeFirebaseUIAuthConfig

TestingCompilerFactory is not available as a provider

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

The property 'supabaseUrl' cannot be destructured from 'getConfig(...)' because it is not defined

Having trouble declaring a module in an npm package with Typescript?

Passing variable values in Angular 6

Checking Email in Angular 2 for Accuracy

When sending an http.post request in Angular 2, the req.body parameter may sometimes

ABP's Angular DateTimePicker Component for Effortless Date and Time

Employing 'as' in a similar manner to *ngIf

Having Trouble with Angular 6 Subject Subscription

Issue with Angular: Global variable not updating within Subscription function

Typescript is requesting an index signature for a nested object that has been validated by Zod and is being received from an API request

It is imperative that the 'Access-Control-Allow-Origin' header value in the response is not set to '*' when the request's credentials mode is 'include'