Material: md-icon: default icons like md-toggle-arrow are not displayed anymore

[oemmes]

Actual Behavior:

• What is the issue? *
  In our application we use some of the default icons (e.g. md-close, md-toggle-arrow) in our HTML templates like <md-icon md-svg-icon="md-toggle-arrow"></md-icon>.
  With Angular Material 1.1.0 (stable) the icons are not displayed anymore.
• What is the expected behavior? The icons should be displayed as before.

I think this has changed since commit 9ce4f9ec4beaa8fe9a6a544e04f7e0d54ee65eb6 which does not add the icons to the registry anymore. Looks like they can only be accessed by injecting $$mdSvgRegistry and processing them programmatically. This would be very inconvenient in contrast to the simple usage with <md-icon>.

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/ZOPgjZ
• Details: With Angular Material 1.1.0-rc4 the icon is visible: http://codepen.io/anon/pen/OXqKwZ

Angular Versions: *

• Angular Version: any
• Angular Material Version: 1.1.0 (stable)

Additional Information:

• Browser Type: * any
• Browser Version: * any
• OS: * any
• Stack Traces:

---

Shortcut to create a new CodePen Demo.
Note: * indicates required information. Without this information, your issue may be auto-closed.

Do not modify the titles or questions. Simply add your responses to the ends of the questions.
Add more lines if needed.

[devversion]

Those icons are actually only for internal-use and shouldn't be used by developers using Angular Material.

To access the given icons you need to load the Material Design Icons font manually.

[oemmes]

It was nice having those icons by default as their SVG sources are loaded anyway. Just for 2 or 3 icons I don't want to load the whole icon font...

As a workaround the icons can still be registered manually like this and are then accessible with <md-icon> as before:

angular.module('myApp').config(
    function($mdIconProvider, $$mdSvgRegistry) {
        // Add default icons from angular material
        $mdIconProvider
            .icon('md-close', $$mdSvgRegistry.mdClose)
            .icon('md-menu', $$mdSvgRegistry.mdMenu)
            .icon('md-toggle-arrow', $$mdSvgRegistry.mdToggleArrow) ;
    }
);

<md-icon md-svg-icon="md-toggle-arrow"></md-icon>

[ThomasBurleson]

Will not fix.

Will not document as your solutions uses a _private_ service. Nice Workaround.

[Amedeo91]

This is not nice as there are js modules that rely on those standard icons and people have to work around the angular material to have that work....