Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

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

Closed
Closed
md-icon: default icons like md-toggle-arrow are not displayed anymore#9336
Labels
resolution: won't fixThere are no resources to fix this issue, the priority is too low, or it doesn't align w/ MD spec.

Description

@oemmes
oemmes
opened on Aug 18, 2016

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 9ce4f9e 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): *

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.

Activity

  1. devversion commented on Aug 18, 2016

    @devversion
    devversion
    on Aug 18, 2016
    Member

    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.

  2. oemmes commented on Aug 18, 2016

    @oemmes
    oemmes
    on Aug 18, 2016
    Author

    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>

  3. ThomasBurleson commented on Aug 26, 2016

    @ThomasBurleson
    ThomasBurleson
    on Aug 26, 2016
    Contributor

    Will not fix.

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

  4. ThomasBurleson
    closed this as completedon Aug 26, 2016
  5. ThomasBurleson
    added
    resolution: won't fixThere are no resources to fix this issue, the priority is too low, or it doesn't align w/ MD spec.
    on Aug 26, 2016

  6. Amedeo91 commented on Jan 14, 2018

    @Amedeo91
    Amedeo91
    on Jan 14, 2018

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

  7. angular
    locked as resolved and limited conversation to collaborators on Jan 17, 2018
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    resolution: won't fixThere are no resources to fix this issue, the priority is too low, or it doesn't align w/ MD spec.

    Type

    No type

    Projects

    No projects

      Milestone

      No milestone

      Relationships

      None yet

      Development

      No branches or pull requests

      Issue actions