Hi I have a problem with paper-icon-button. When the element is located inside another element the icon doesn't show. Here is the important code snippet:
<paper-dialog>
<iron-pages>
<login-view name="login"></login-view>
<passreset-view name="passreset"></passreset-view>
</iron-pages>
<iron-icon icon="close"></iron-icon> // Shows okay
<paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button> // doesn't show
</paper-dialog>
I made sure all the imports are okay and I use the element successfully elsewhere. If I put the element out of the paper-dialog then it shows up okay.
I thought there is some problem with paper-dialog's light DOM so I tried to put the the iron-icon inside as is shown above and the iron-icon showed up correctly.
I am out of ideas any advice will be appreciated.
EDIT: full code
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-icons/iron-icons.html">
<link rel="import" href="/bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="/bower_components/paper-dialog/paper-dialog.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="/bower_components/neon-animation/animations/fade-out-animation.html">
<dom-module id="main-dialog">
<template>
<style>
@media only screen and (min-width: 767px) {
#dialogID {
max-width: 500px;
padding: 30px 50px 0 50px;
}
}
@media only screen and (max-width: 767px) {
#dialogID {
position: fixed;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
}
}
#closeBtn {
position: absolute;
right: 5px;
top: 5px;
}
</style>
<paper-dialog id="dialogID" with-backdrop entry-animation="scale-up-animation"
exit-animation="fade-out-animation">
<iron-pages id="main_pages" selected="{{viewName}}" attr-for-selected="name">
<login-view name="login"></login-view>
<registration-view name="registration"></registration-view>
<emaildialog-view name="emaildialog"></emaildialog-view>
<actionerror-view name="actionerror"></actionerror-view>
<actionconfirm-view name="actionconfirm"></actionconfirm-view>
<passreset-view name="passreset"></passreset-view>
<emailinput-view name="emailinput"></emailinput-view>
</iron-pages>
<iron-icon icon="close"></iron-icon>
<paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button>
</paper-dialog>
</template>
<script>
Polymer({
is: 'main-dialog',
properties: {
viewName: {
type: String,
value: "login",
}
},
listeners: {
'dialog-confirm': '_dialogConfirm',
},
_showDialog: function (event) {
this.viewName = event.detail.viewName;
this.importHref("/views/dialog_views/" + event.detail.path + event.detail.viewName + "-view.html", function () {
if (event.detail.open) {
this.$.dialogID.toggle();
}
}.bind(this), null, true);
},
_dialogConfirm: function (event) {
this.$.dialogID.close();
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
}
});
</script>
</dom-module>
I solved the issue by removing the paper-dialog an using Polymer.PaperDialogBehavior, Polymer.NeonAnimationRunnerBehavior behaviors directly in my element.
Here is the code:
<link rel="import" href="/bower_components/polymer/polymer.html">
<link rel="import" href="/bower_components/iron-pages/iron-pages.html">
<link rel="import" href="/bower_components/neon-animation/animations/scale-up-animation.html">
<link rel="import" href="/bower_components/neon-animation/animations/fade-out-animation.html">
<link rel="import" href="/bower_components/iron-flex-layout/iron-flex-layout.html">
<link rel="import" href="/bower_components/neon-animation/neon-animation-runner-behavior.html">
<link rel="import" href="/bower_components/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="/bower_components/paper-dialog-behavior/paper-dialog-shared-styles.html">
<dom-module id="custom-dialog">
<template>
<style>
:host {
display: block;
background: white;
}
#closeBtn {
position: absolute;
right: 5px;
top: 5px;
}
@media only screen and (min-width: 767px) {
:host {
max-width: 500px;
padding: 30px 50px 30px 50px;
}
}
@media only screen and (max-width: 767px) {
:host {
position: fixed;
margin: 0;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding-left: 5%;
padding-right: 5%;
padding-top: 2%;
width: 100%;
}
}
</style>
<paper-icon-button dialog-dismiss icon="close" id="closeBtn"></paper-icon-button>
<iron-pages id="main-pages" selected="{{viewName}}" attr-for-selected="name">
<login-view name="login"></login-view>
<registration-view name="registration"></registration-view>
<emaildialog-view name="emaildialog"></emaildialog-view>
<actionerror-view name="actionerror"></actionerror-view>
<actionconfirm-view name="actionconfirm"></actionconfirm-view>
<passreset-view name="passreset"></passreset-view>
<emailinput-view name="emailinput"></emailinput-view>
</iron-pages>
</template>
<script>
Polymer({
is: 'custom-dialog',
behaviors: [
Polymer.PaperDialogBehavior,
Polymer.NeonAnimationRunnerBehavior
],
properties: {
viewName: {
type: String,
value: "login"
}
},
listeners: {
'dialog-confirm': '_dialogConfirm',
'neon-animation-finish': '_onNeonAnimationFinish'
},
_renderOpened: function () {
this.cancelAnimation();
this.playAnimation('entry');
},
_renderClosed: function () {
this.cancelAnimation();
this.playAnimation('exit');
},
_onNeonAnimationFinish: function () {
if (this.opened) {
this._finishRenderOpened();
} else {
this._finishRenderClosed();
}
},
// Custom
_showDialog: function (event) {
this.viewName = event.detail.viewName;
this.importHref("/views/dialog_views/" + event.detail.path + event.detail.viewName + "-view.html", function () {
if (event.detail.open) {
this.toggle();
} else {
this.notifyResize();
}
}.bind(this), null, true);
},
_dialogConfirm: function (event) {
this.close();
event.stopPropagation ? event.stopPropagation() : (event.cancelBubble = true);
}
});
</script>
</dom-module>