I was looking for json format icon from the polymer iron icons list which is not available
something similar to http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/high-resolution-dark-blue-denim-jeans-icons-alphanumeric/072287-high-resolution-dark-blue-denim-jeans-icon-alphanumeric-bracket-curley.png
I am tried below workaround but it didnt work either
<paper-icon-button id="json">{}</paper-icon-button>
https://codepen.io/nagasai/pen/rwqYYZ
<head>
<base href="https://polygit.org/polymer+v2.0.0/shadycss+webcomponents+1.0.0/components/">
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="paper-icon-button/paper-icon-button.html">
<link rel="import" href="iron-icons/iron-icons.html">
<div class="toolbar">
</head>
<body>
<paper-icon-button id="json">{}</paper-icon-button>
<paper-icon-button id="save" icon="icons:save"></paper-icon-button>
</body>
<paper-icon-button> has a src property to specify the URL of the desired image. You could even specify the .png URL you indicated in the question, like this:
<paper-icon-button src="http://cdn.mysitemyway.com/etc-mysitemyway/icons/legacy-previews/icons/high-resolution-dark-blue-denim-jeans-icons-alphanumeric/072287-high-resolution-dark-blue-denim-jeans-icon-alphanumeric-bracket-curley.png"></paper-icon-button>
codepen
Related
Summary
I'm working on a Polymer project based off the Polymer starter kit, and I ran into a problem where icons from the default icon set aren't appearing. Their size and style is calculated correctly, but there's no SVG within the tag when I use inspect element. I've tried icons from maps and social which all work, but the ones from icons just don't have an image.
I've tried various different solutions:
Following this Stack Overflow question here, I did the accepted solution with no results.
I deleted all of my Polymer components and did a fresh bower install + bower update. Still no go.
I saw somewhere that the Polymer Starter Kit has a conflict with the my-icons.html file, so I renamed it to custom-icons.html. This also didn't work.
This is very confusing and frustrating because the problem seemed to pop up out of nowhere. One day the default iron-icons were working, and the next they weren't.
My imports
<link rel="import" href="../bower_components/polymer/polymer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer/app-drawer.html">
<link rel="import" href="../bower_components/app-layout/app-drawer-layout/app-drawer-layout.html">
<link rel="import" href="../bower_components/app-layout/app-header/app-header.html">
<link rel="import" href="../bower_components/app-layout/app-header-layout/app-header-layout.html">
<link rel="import" href="../bower_components/app-layout/app-scroll-effects/app-scroll-effects.html">
<link rel="import" href="../bower_components/app-layout/app-toolbar/app-toolbar.html">
<link rel="import" href="../bower_components/app-route/app-location.html">
<link rel="import" href="../bower_components/app-route/app-route.html">
<link rel="import" href="../bower_components/iron-pages/iron-pages.html">
<link rel="import" href="../bower_components/iron-icons/iron-icons.html">
<link rel="import" href="../bower_components/iron-icons/maps-icons.html">
<link rel="import" href="../bower_components/iron-icon/iron-icon.html">
<link rel="import" href="../bower_components/iron-localstorage/iron-localstorage.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">
<link rel="import" href="../bower_components/paper-item/paper-icon-item.html">
<link rel="import" href="app-data.html">
<link rel="import" href="log-out.html">
<link rel="import" href="custom-icons.html">
Utilization
<a href="/#/home-quotes" tabindex="-1">
<paper-icon-item>
<iron-icon icon="icons:settings" item-icon></iron-icon> <!-- This doesn't work -->
Home
</paper-icon-item>
</a>
<a href="/#/secret-quotes" hidden$="[[!storedUser.loggedin]]" tabindex="-1">
<paper-icon-item>
<iron-icon icon="maps:add-location" item-icon></iron-icon> <!-- This works? -->
Secret Quotes
</paper-icon-item>
</a>
UPDATE The bug has been fixed in Polymer Starter Kit 2.1.1. Now when you run polymer init starter-kit, the generated codebase will include the fix.
I suspect the problem is a naming conflict with your iconset (Issue #934), which was recently fixed.
Before the fix, the name of the custom iconset in Polymer Starter Kit was icons, which is unfortunately also the name of the default iconset from <iron-icons>. Since your custom-icons.html import occurs after iron-icons.html, your iconset takes precedence.
The fix is to rename your custom icons to avoid the name conflict, allowing for both iconsets to coexist. That is, change the iconset's name attribute in your custom-icons.html to something like this:
<iron-iconset-svg name="my-custom-icons" size="24">
I've been trying to use the polymer CDN , polygit on plunker but i can't even render a single polymer element. In the folowing plunk and code link i tried rendering a paper-tab and paper-button. Please can someone show me what i'm doing wrong. thanks.
https://plnkr.co/edit/z0y06qu4LdfpxhcpYyn7?p=preview
...
<head>
<base href="http://polygit.org/polymer+:master/components/">
<script src="webcomponentsjs/webcomponents-lite.min.js"></script>
<link href="polymer/polymer.html" rel="import">
` <link rel="import" href="paper-material/paper-material.html">
<link href="paper-button/paper-button.html" rel="import">
<link href="paper-tabs/paper-tabs.html" rel="import">
</head>
<body unresolved>
<paper-button raised>New</paper-button>
<paper-tabs>
<paper-tab>Color</paper-tab>
<paper-tab>Code</paper-tab>
<paper-tab>Mark</paper-tab>
</paper-tabs>
</body>
...
Changing protocol to https will solve you issue.
<base href="https://polygit.org/polymer+:master/components/">
Hello
I'm starting with Polymer 1.0 and I'm trying to create my first element and load into an html page. I'm using Chrome Dev Editor, the project was created correctly because I could load all the example. After that I eliminate all the example code and create a:
Folder "elements" into the project
"hello-world.html" with the following code:
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" noscript>
<template>
<h1>Hello World</h1>
</template>
Updated the code in the "index.html" file
<!doctype html>
<html>
<head>
<title>PolyExample</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="elements/hello-world.html">
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Test Polymer</h1>
<hello-world></hello-world>
</body>
</html>
I will appreciate any help about this
Thanks in advance
Your code has a serious problem in the way you create your element,
You use a dom-module element to create a new element and you need to write some JS to initialize the element. Below is an example
<link rel="import"
href="bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer({
is: "hello-world"
});
</script>
</dom-module>
The script tag with that code is essential for your element to work.
This is probably as simple as it gets.
To read more on that follow the link:
https://www.polymer-project.org/1.0/docs/start/quick-tour.html
Trying to display hello world using elements but nothing happens any help?
index.html
<!DOCTYPE html>
<html>
<head>
<meta name="viewport"
content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
<link rel="import" href="elements/hello-world.html">
</head>
<body unresolved>
<hello-world></hello-world>
</body>
</html>
hello-world.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<polymer-element name="hello-world" nonscript>
<template>
<h2>Hello World</h2>
</template>
</polymer-element>
Code for "hello-world.html" is now:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello-world">
<template>
<h1>Hello World</h1>
</template>
<script>
Polymer ({ is: "hello-world", });
</script>
</dom-module>
If you are using polymer version 0.8 or 0.9, then <polymer-element ... should be <dom-module ...
See more from polymer site:
https://www.polymer-project.org/0.9/docs/start/quick-tour.html
You have a typo, nonscript needs to be noscript.
<polymer-element name="hello-world" noscript>
I have the same problem and dont find the mistake.
index.html
<html>
<head>
<title>Polymer-Application</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!--<script src="bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="bower_components/webcomponentsjs/webcomponents.min.js"></script>
<!-- file is available, auto completed by api -->
<link rel="import" href="hello/hello.html">
<!-- file is available, auto completed by api -->
<!-- netbeans doesn't know relation import -->
</head>
<body>
<h1>My first Polymer-Application</h1>
<hello></hello>
</body>
</html>
hello/hello.html
<link rel="import" href="../bower_components/polymer/polymer.html">
<!-- file is available, auto complete by api -->
<polymer-element name="hello" noscript>
<template>
<h1>Hello Polymer world</h1>
</template>
</polymer-element>
My platfrom is:
Win 8.1
nodejs
bower
polymer (installed over bower, folders and files are availible)
git
netbeans dev edition (as editor)
xammp (as apache webserver)
tested with chrome, firefox and ie10 and the custom element is not be shown. i don't think it's a browser problem. it's the simpliest element you can write, but why did it not work?
Edit:
tested it on a clean ubuntu installation. and it still does not work?
i also tested original code from the polymer page and this won't work too.
am i to stupid for copy paste?
Edit 2:
i found it an have running my polymer apps. If i use Polymer 1.0.9 i should not read the tutorial for 0.5.0
changes:
index.html:
<!DOCTYPE html>
<html>
<head>
...
<script scr="bower_components/webcomponents-lite.min.js"></script>
<!-- the lite edition is needet since polymer version 0.8 -->
<link rel="import" href="hello/hello.html">
...
</head>
<body>
<hello></hello>
</body>
</html>
hello/hello.html:
<link rel="import" href="../bower_components/polymer/polymer.html">
<dom-module id="hello">
<!-- its not longer a polymer-element. we have to use dom-module and id and the noscript option is not longer supported -->
<template>
<template>
<script>
// everytime you need to initialize a Polymer object
Polymer({
is: 'hello' // must be set now
});
</script>
</dom-module>
if you want to work with parameters you need to set it in the polymer ready function and every placeholder must be surrounded by a html tag like span without any other content in it.
Replace the line
<script src="bower_components/webcomponentsjs/webcomponents.js"></script>
with
<script src="../bower_components/webcomponentsjs/webcomponents.js"></script>
This should fix the issue.
As far as I can tell from the documentation here and here, the following should be right. But it's not working. I get no errors. My page just says "test test" (You'll see why in the code). What is wrong?
NOTE I had this working fine with core-ajax directly in a single blog entry, so I know my data is fine, etc
slog-entry.html this is the element for each entry in my demo blog app
<link rel="import" href="../polymer/polymer.html">
<link href="../core-ajax/core-ajax.html" rel="import">
<polymer-element name="slog-entry" noscript>
<template>
<h1>{{entry.Title}}</h1>
<p>{{entry.Text}}</p>
<span>{{entry.timestamp}}</span>
</template>
</polymer-element>
slog-entries.html this is the element for the collection of entries in my blog app
<link rel="import" href="../polymer/polymer.html">
<link href="../slog-entry/slog-entry.html" rel="import">
<polymer-element name="slog-entries" noscript>
<template>
<core-ajax auto
url="https://<server>/entries.json"
response="{{entries}}">
</core-ajax>
test
<template repeat="{{entry in entries}}">
<slog-entry bind="{{entry}}"></slog-entry>
</template>
</template>
</polymer-element>
slog.html this is the index
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Status Log 0.1b</title>
<script src="templates/platform/platform.js"></script>
<link href="templates/slog-entries/slog-entries.html" rel="import">
<link href="templates/polymer/polymer.html" rel="import">
</head>
<body>
test
<slog-entries></slog-entries>
</body>
</html>
UPDATE Here is what the DOM looks like:
Your syntax bind="{{entry}}" doesn't do what I suspect you want it to do.
Polymer binding uses a syntax like this <name of thing to bind to>="{{<source value>}}".
Now, in order to have a name of thing to bind to, elements must publish those names.
So, slog-entry has to look like this:
<polymer-element name="slog-entry" attributes="entry" noscript>
The attributes="entry" bit on the element causes slog-entry to accept bindings to property entry (this is what we call publishing).
Now your repeat can look like this:
<template repeat="{{entry in entries}}">
<slog-entry entry="{{entry}}"></slog-entry>
</template>
We are telling the system to bind the entry property of each slog-entry to the entry value at each repeat.