angular/material-start

Error when injecting the icon provider

baumgarb opened this issue · 5 comments

Hi,

hope I'm not wrong with that but as far as I can see there's an error in the tutorial when injecting the icon provider. Referring to the branch es5-tutorial the error occurs in the tutorial step number 4. The code according to the tutorial is something like that:

angular
    .module('starterApp', ['ngMaterial', 'users'])
    .config(function( $mdIconProvider ){

        // Register the user avatar icons
        $mdIconProvider
                .defaultIconSet("./assets/svg/avatars.svg", 128);
    });

Executing this code angular raises an error saying: Unknown provider: $mdIconProviderProvider

If I change the parameter from $mdIconProvider to $mdIcon angular resolves the provider properly, but then angular gives me a TypeError telling me, that $mdIcon.defaultIconSet is not a function.

I'm somehow lost with that...

Consider this JsBin http://jsbin.com/manewahome/edit?html,output

screen shot 2016-03-01 at 8 45 52 am

If you look at the dev console, you will not see any errors AND the avatars render as desired.

That JSBin uses the angular/bower-material/master branch and Angular 1.4.9.

I am unclear why you are getting such an error. Please provide a codePen or JSbin to validate and resolve your error. Please note:

  • JSBin uses ng-app="MyApp" and .module('MyApp', ['ngMaterial', 'users']),

while the

  • Readme Tutorial uses ng-app="starterApp" and .module('starterApp', ['ngMaterial', 'users'])

First of all thanks a lot for replying that fast! I uploaded the sample as it is here

Even though it's not CodePen oder JSBin but you should be able to reproduce the issue if you open up any browser's developer tools and take a look at the console. All libraries were installed using bower yesterday.

Thanks a lot in advance for spending your time on my issue!

You are trying to configure the provider in the .run( ... ) block:

angular
    .module("mdIconProviderApp", ["ngMaterial"])
    .run(function ($mdIconProvider) {
        // Register the user `avatar` icons
        // $mdIconProvider.defaultIconSet("./assets/svg/avatars.svg", 128);
        // $mdIcon.icon("menu", "./assets/svg/menu.svg", 24);
    });

Try using the .config( ... ) block:

angular
    .module("mdIconProviderApp", ["ngMaterial"])
    .config(function ($mdIconProvider) {
        // Register the user `avatar` icons
        // $mdIconProvider.defaultIconSet("./assets/svg/avatars.svg", 128);
        // $mdIcon.icon("menu", "./assets/svg/menu.svg", 24);
    });

Oh man facepalm I am really sorry for bothering you, yes you're right, that was the problem.

Thank you very much!