icon: forces you to mark glyphs with id attribute

[oliversalzburg]

Bug, enhancement request, or proposal:

Bug/enhancement

Detailed Reproduction Steps:

Try to load a .svg that doesn't mark individual glyphs with id. Like so:

  $mdIconProvider
    .defaultIconSet('http://materialdesignicons.com/cdn/3.5.95/fonts/materialdesignicons-webfont.svg')

What is the expected behavior?

You can use the glyphs from the SVG.

What is the current behavior?

You can't, because the glyphs are identified by a glyph-name attribute instead of an id attribute.

What is the use-case or motivation for changing an existing behavior?

Integrating such an SVG is overly and needlessly complicated by the fact that the MdIconService does not allow more flexibility in the lookup process and it is not easily decorated.

Which versions of AngularJS, Material, OS, and browsers are affected?

• AngularJS: 1.7.7
• AngularJS Material: 1.1.13

[Splaktar]

Thank you for reporting this. Can you please provide a CodePen demo?

[oliversalzburg]

https://codepen.io/anon/pen/PLpKLB?editors=1111

[Splaktar]

Thank you, I updated the CodePen to 1.1.14.

I get a lot of errors in my browser along with a blank white page when trying to open https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/3.5.95/fonts/materialdesignicons-webfont.svg.

h1.js:145 Uncaught TypeError: Cannot use 'in' operator to search for 'animation' in undefined
    at o (h1.js:145)
    at Object.<anonymous> (h1.js:73)
    at t (h1.js:1)
    at Object.<anonymous> (h1.js:145)
    at t (h1.js:1)
    at Object.<anonymous> (h1.js:99)
    at t (h1.js:1)
    at Object.<anonymous> (h1.js:145)
    at t (h1.js:1)
    at Object.<anonymous> (h1.js:49)
    at t (h1.js:1)
    at Object.<anonymous> (h1.js:145)
    at t (h1.js:1)
    at Object.<anonymous> (h1.js:49)
    at t (h1.js:1)
    at Object.<anonymous> (h1.js:49)
onloadwff.js:71 Uncaught (in promise) TypeError: Cannot read property 'querySelectorAll' of null
    at e.<anonymous> (onloadwff.js:71)
    at onloadwff.js:71
    at Object.next (onloadwff.js:71)
    at a (onloadwff.js:71)
h1.js:49 jQuery.Deferred exception: Cannot read property 'getStoreByUrl' of undefined TypeError: Cannot read property 'getStoreByUrl' of undefined
    at y (chrome-extension://bmnlcjabgnpnenekpadlanbbkooimhnj/h1.js:57:84377)
    at XMLDocument.<anonymous> (chrome-extension://bmnlcjabgnpnenekpadlanbbkooimhnj/h1.js:57:85628)
    at l (chrome-extension://bmnlcjabgnpnenekpadlanbbkooimhnj/h1.js:49:25140)
    at c (chrome-extension://bmnlcjabgnpnenekpadlanbbkooimhnj/h1.js:49:25454) undefined
ve.Deferred.exceptionHook @ h1.js:49
h1.js:49 Uncaught TypeError: Cannot read property 'getStoreByUrl' of undefined
    at y (h1.js:57)
    at XMLDocument.<anonymous> (h1.js:57)
    at l (h1.js:49)
    at c (h1.js:49)
/favicon.ico:1 Failed to load resource: the server responded with a status of 404 ()

Do you have a .svg link that will render properly?

I managed to track down the source of these icons to http://materialdesignicons.com/

A related issue was also reported to their repo: Templarian/MaterialDesign#3994.

As far as I can tell at this point, this issue along with Templarian/MaterialDesign#4047 are due to their SVG implementation needing to improve to support AngularJS Material.