mdIcon: Add support for symbol-tags

[Frank3K]

The current implementation of md-icon (v0.8.0-rc1-master-91053dc) does not properly handle icons wrapped in symbol-tags. It just adds the complete symbol tag:

     if (el.tagName != 'svg') {
       el = angular.element('<svg xmlns="http://www.w3.org/2000/svg">').append(el)[0];
     }

Since symbol tags are graphical template objects, they do not show unless they are instantiated by a use-tag.

Use case: the grunt-svgstore plugin merges multiple SVG's into a single SVG (see also this css-tricks post). The plugin wraps each SVG in its own symbol tag.

Possible solution: include the child nodes instead of the parent symbol tag. E.g.:

     switch (el.tagName) {
       case 'svg':
         break;
       case 'symbol':
         el = angular.element('<svg xmlns="http://www.w3.org/2000/svg">').append(el.childNodes)[0];
         break;
       default:
         el = angular.element('<svg xmlns="http://www.w3.org/2000/svg">').append(el)[0];
         break;
     }

[programmist]

This will actually be made obsolete by #1548, which is scheduled for 1.0.0-beta. Maybe we can close this one?

[Frank3K]

I'd love to see this change land in master, such that I / others can already start using symbol-tags. When #1548 is implemented, the symbol-tags should just keep on working, but then a little better.

[ThomasBurleson]

@programmist - if we are doing another enchancement for Icons in 1.0beta and this will be resolved by those, then let's wait.