CODEWITHSUNDEEP
polymerpolymer-1.0
Buddy G.
Buddy G.

Reputation: 13

paper-icon-button not visible in app-toolbar area

learning Polymer's layout, the paper-icon-button is not visible in the App-toolbar area, code is ` 

<!-- sample-content included for demo purposes only -->
<link rel="import" href="app-layout/demo/sample-content.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="paper-styles/paper-styles.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">

<style is="custom-style">
    body {
        /* No margin on body so toolbar can span the screen */
        margin: 0;
    }
    app-toolbar {
        /* Toolbar is the main header, so give it some color */
        background-color: #1E88E5;
        font-family: 'Roboto', Helvetica, sans-serif;
        color: white;
        --app-toolbar-font-size: 24px;
    }
</style>
</head>
<body>
<app-toolbar>

<paper-icon-button icon="menu"></paper-icon-button>
<div title>Spork</div>
<paper-icon-button icon="search"></paper-icon-button>
</app-toolbar>

</body>`

2, any idea why? Thanks,

the correct out should have been: [app-toolbar with buttons][3]

BuddyG

Upvotes: 1

Views: 649

Answers (1)

a1626
a1626

Reputation: 2964

You are missing the import for iron-icons which contains the search and menu icon. Including this should solve your issue <link rel="import" href="iron-icons/iron-icons.html">

<base href="https://polygit.org/components/">
<link rel="import" href="app-layout/demo/sample-content.html">
<link rel="import" href="iron-icon/iron-icon.html">
<link rel="import" href="iron-icons/iron-icons.html">
<link rel="import" href="paper-styles/paper-styles.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">

<style is="custom-style">
  body {
    /* No margin on body so toolbar can span the screen */
    margin: 0;
  }
  app-toolbar {
    /* Toolbar is the main header, so give it some color */
    background-color: #1E88E5;
    font-family: 'Roboto', Helvetica, sans-serif;
    color: white;
    --app-toolbar-font-size: 24px;
  }
</style>
</head>

<body>
  <app-toolbar>

    <paper-icon-button icon="menu"></paper-icon-button>
    <div title>Spork</div>
    <paper-icon-button icon="search"></paper-icon-button>
  </app-toolbar>

</body>

Upvotes: 3

Related Questions