How to use polymer core icons inside angular.js .. application?

Question

I use angular.js to create SPA and angular material for layout design. But it turns out that the angular material icons are not CSS-shaped, but polymer icons. Therefore, I want to use polymer icons in my angular.js application. I included polymer.jsin my scripts and imported core-icons.html, but an error occurred.

Uncaught HierarchyRequestError: Failed to execute 'appendChild' on 'Node': Nodes of type 'HTML' may not be inserted inside nodes of type '#document'.

Uncaught TypeError: Cannot read property 'resolveDom' of undefined 

How can I use polymer icons in my angular.js .. ?? application

Answer 1

Angular ShadowDOM, . , Angular HTML, , , .

Polymer 0.8 Angular.

, , , polymer.js webcomponents.js. polymer.js - , , webcomponents.js polyfill -.

Answer 2

angular, angular. "Paper Paper", core-icon.

polymer.js, :

polymer.html, core-icon.html, core-icons.html

- ,

-button.html am , core-icons/social-icons.html,

( , , )

<button ng-click="toggleLeft()" class="rp-menu-button">
    <core-icon icon="menu></core-icon>
</button>

CSS ():

.rp-menu-button {
    background: none;
    border: none; 
    .rp-menu-icon;
}

.rp-menu-icon {
    width: 48px;
    height: 48px;
    color: @toolbar-font-color;
}

"":

<paper-icon-button class="rp-card-paper-icon" id="share" icon="social:share">

CSS ():

.rp-card-paper-icon {
    text-align: center;
    color: @inactive-icon;
    &:hover {
        color: @active-icon;
    }   
}
.rp-card-paper-icon::shadow core-icon {
    width: 18px;
    height: 18px;
}

.rp-card-paper-icon::shadow #ripple {
    width: 33px;
    height: 33px;
}

.rp-card-paper-icon#share::shadow #ripple {
    color: green;
}

, . [class]:: shadow core-icon,

.rp-card-paper-icon::shadow #ripple

( -)