Menu
I have a polymer 1.x element called input-header and it looks like this
<link rel="import" href="../../bower_components/polymer/polymer.html">
<dom-module id="input-header">
<template>
<style>
.dropdown-content {
padding: 0px;
}
</style>
<paper-toolbar>
<paper-icon-button icon="mail"></paper-icon-button>
<iron-icon icon="image:transform"></iron-icon>
<div class="title">Left</div>
<paper-menu-button horizontal-align="right" vertical-align="top">
<paper-icon-button icon="more-vert" class="dropdown-trigger"></paper-icon-button>
<div class="title">Right</div>
</paper-menu-button>
</paper-toolbar>
</template>
<script>
Polymer({
is: 'input-header',
properties: {
label: {
type: String,
notify: true
}
}
});
</script>
</dom-module>
I have included it in my index.html as follows :
<body unresolved id="app">
<input-header label="Left"></input-header>
</body>
But for some reason, the paper-icon or iron-icons don't show up as seen here
710
Update : See this working demo
You have to import paper-icon-button, iron-icon and image-icons.html, either globally or in this particular element. Like this
<!-- import the iron-icon & paper-icon-button custom element -->
<link rel="import"
href="path/to/iron-icons/iron-icons.html">
<!----- this is required for iron-icon image:transform to work ----->
<link rel="import"
href="path/to/iron-icons/image-icons.html">
<!---------------------------------------------->
<link rel="import"
href="path/to/paper-icon-button/paper-icon-button.html">
<link rel="import"
href="path/to/paper-toolbar/paper-toolbar.html">
<link rel="import"
href="path/to/paper-menu-button/paper-menu-button.html">
I assume that you have installed/downloaded the iron-icon and other elements. If you are using bower do this
bower install --save PolymerElements/iron-icon
bower install --save PolymerElements/paper-icon-button
find bower install command for other elements from Polymer Element Catalog
126
The iron-icons bug is an artifact of the Polymer starter kit that includes a file called my-icons.html. This file is identically named as one of the low level iron-icons files. naturally it overrides the one we really want.
Renaming my-icons.html to anythingElse-icons.html or to my-icons.html.buggy will instantly make the iron-icons available. Woohoo.
22
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
