Como usar ícones do núcleo de polímero dentro de um aplicativo angular.js ..? - angularjs, polímero

Eu estou usando angular.js para construir um SPA e material angular para o projeto do layout. Mas acontece que os ícones de materiais angulares não são CSS estilizáveis, mas os ícones do polímero são. Então, eu quero usar ícones de polímeros dentro do meu aplicativo angular.js .. Eu incluí polymer.js nos meus scripts e importação core-icons.html mas há um erro ..

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

Como posso usar ícones de polímero dentro do meu aplicativo angular.js .. ??

Respostas:

0 para resposta № 1

Angular não entende o ShadowDOM que o Polymer faz uso extensivo. Portanto, quando o Angular analisa e compila o HTML, ele não sabe o que fazer com quais elementos customizados geram um erro.

Mas do Polymer 0.8 isso pode mudar e pode ser compatível com o Angular.

Mais uma coisa que eu notei na sua pergunta foi que, você adicionou polymer.js ao invés de webcomponents.js. polymer.js é a biblioteca de polímeros que é usada para fazer novos elementos e interagir com eles, onde estão webcomponents.js é o polyfill para componentes da Web.

---

0 para resposta № 2

Eu usei ícones de polímero em um projeto angular usando material angular. No meu caso, eu queria usar o elemento polímero de papel-ícone-botão também, mas eu também fiz isso com apenas um elemento de núcleo-ícone.

Eu não precisei incluir o polymer.js, apenas:

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

Eu usei um botão de ícone de papel, então eu também incluí

paper-icon-button.html e eu usei um ícone do conjunto social, então incluí também core-icons / social-icons.html

para apenas um ícone do core (eu tinha em um botão, mas eu não acho que é necessário)

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

O CSS (LESS):

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

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

Ou para um botão de ícone de papel:

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

O CSS (LESS):

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

Então você define a cor na classe e o tamanho do ícone em [class] :: shadow core-icon e você pode usar

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

para estilizar o efeito cascata (se você estiver usando um botão de ícone de papel)

---