polymerelements / iron-icons Goto Github PK

A set of icons for use with iron-icon

Home Page: https://www.webcomponents.org/element/PolymerElements/iron-icons

JavaScript 30.71% HTML 69.29%

iron-icons's Introduction

<iron-icons>

iron-icons is a utility import that includes the definition for the iron-icon element, iron-iconset-svg element, as well as an import for the default icon set.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/iron-icons

In an HTML file

<html>
  <head>
    <script type="module">
      import '@polymer/iron-icon/iron-icon.js';
      import '@polymer/iron-icons/iron-icons.js';
    </script>
  </head>
  <body>
    <iron-icon icon="search"></iron-icon>
  </body>
</html>

In a Polymer 3 element

import {PolymerElement} from '@polymer/polymer/polymer-element.js';
import {html} from '@polymer/polymer/lib/utils/html-tag.js';

import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-icons/iron-icons.js';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-icon icon="search"></iron-icon>
    `;
  }
}

customElements.define('example-element', ExampleElement);

Contributing

If you want to send a PR to this element, here are the instructions for running the tests and demo locally:

Installation

git clone https://github.com/PolymerElements/iron-icons
cd iron-icons
npm install
npm install -g polymer-cli

Running the demo locally

polymer serve --npm
open http://127.0.0.1:<port>/demo/

Running the tests

polymer test --npm

iron-icons's People

Contributors

Stargazers

Watchers

iron-icons's Issues

Break icon sets into directories

So I looked into the CSS/HTML portion of my vulcanized output and the majority of that code was unused iron-icons. These are aren't very compressible and I doubt DCE would catch unused ones.

I was thinking that you could keep the current system of an HTML import for each set but have your build system split the files up into discrete icons in a subdirectory. Then you can import the entire set during development and narrow down which icons to import after you've finished.

Static Code Analysis Findings

Cross-Site Request Forgery - At Line: 259 of File: frontend/src/static/bower_components/iron-ajax/test/iron-ajax.html

Cross-Site Request Forgery - At Line: 117 of File: frontend/src/static/bower_components/iron-form/demo/index.html
Cross-Site Request Forgery - At Line: 145 of File: frontend/src/static/bower_components/iron-form/demo/index.html
Cross-Site Request Forgery - At Line: 170 of File: frontend/src/static/bower_components/iron-form/demo/index.html
Cross-Site Request Forgery - At Line: 209 of File: frontend/src/static/bower_components/iron-form/demo/index.html
Cross-Site Request Forgery - At Line: 232 of File: frontend/src/static/bower_components/iron-form/demo/index.html
Cross-Site Request Forgery - At Line: 81 of File: frontend/src/static/bower_components/iron-form/demo/index.html
HTML5: Form Validation Turned Off - At Line: 209 of File: frontend/src/static/bower_components/iron-form/demo/index.html
Cross-Site Request Forgery - At Line: 15 of File: frontend/src/static/bower_components/iron-form/iron-form.html
Cross-Site Request Forgery - At Line: 26 of File: frontend/src/static/bower_components/iron-form/iron-form.html
Cross-Site Request Forgery - At Line: 67 of File: frontend/src/static/bower_components/iron-form/iron-form.html
Cross-Site Request Forgery - At Line: 94 of File: frontend/src/static/bower_components/iron-form/iron-form.html
Password Management: Insecure Submission - At Line: 86 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Password Management: Password in HTML Form - At Line: 86 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Privacy Violation: Autocomplete - At Line: 86 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 107 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 120 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 138 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 158 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 164 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 170 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 176 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 182 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 188 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 195 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 206 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 219 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 240 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 246 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 252 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 43 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 52 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 61 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 68 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 81 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 886 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 93 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 954 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 98 of File: frontend/src/static/bower_components/iron-form/test/basic.html
HTML5: Form Validation Turned Off - At Line: 164 of File: frontend/src/static/bower_components/iron-form/test/basic.html
JavaScript Hijacking: Vulnerable Framework - At Line: 954 of File: frontend/src/static/bower_components/iron-form/test/basic.html
Cross-Site Request Forgery - At Line: 118 of File: frontend/src/static/bower_components/iron-form/test/slotted.html
Cross-Site Request Forgery - At Line: 39 of File: frontend/src/static/bower_components/iron-form/test/slotted.html
Cross-Site Request Forgery - At Line: 36 of File: frontend/src/static/bower_components/iron-form-element-behavior/demo/index.html
Cross-Site Request Forgery - At Line: 29 of File: frontend/src/static/bower_components/iron-form-element-behavior/test/basic.html
Insecure Randomness - At Line: 42 of File: frontend/src/static/bower_components/iron-image/demo/index.html
Insecure Randomness - At Line: 71 of File: frontend/src/static/bower_components/iron-image/test/iron-image.html

Easy To Fix: remove inline fill color in "track-changes" and "play-for-work" icons

Unlike the other icons in iron-icons.html, those two have fill="#123" inline which doesn't seem to be necessary and makes it difficult to change their color. Simply removing this seems to do the trick I think.

Material design icons 2.1.1

Material design icons has been updated with lot of new icons i don't see in actual iron-icons/demo.
Material design icons: https://github.com/google/material-design-icons/releases

Have you planed to update iron-icons ?

Thanks.

Export only the icons used in the app

Description

When building a custom component with angular 9 (ivy, webpack), I would like my bundle size to be as small as possible.

Expected outcome

I would like to be able to have in my final bundle only the icons that are being used in my app.

Actual outcome

I am using only two icons for my custom component, but I get an SVG with all the icons.

Demo for iron-icon is two arrows

See https://elements.polymer-project.org/elements/iron-icon?active=iron-icon&view=demo:demo/index.html

cc @ebidel @arthurevans @robdodson

ID's of iron-icons break other functions that use the same ID in Polymer 3

Description

The iron-icons element prevents functions from other elements on the page with the same id from working.

Expected outcome

iron-icons to be scoped inside it's own component and not being put into the lightdom where it can be accessed by other functions/elements that use a querySelector.

Actual outcome

When using [email protected] (to be used with Polymer 3) the icons get placed in the head with the <g id="search">...</g> directly in the dom. Any other elements or non-webcomponents functions that use the same id for a querySelector will get the iron-icon instead.

Live Demo

Can't create a demo right now (no online editor seems to support Polymer 3?)

Steps to reproduce

Put a iron-icon element in the page.
Put a other non-polymer element in the page that uses a querySelector that matches the id of a the iron-icon icon used
The non-polymer element querySelector returns the iron-icon g element with the matching ID

Browsers Affected

Have not checked all browsers, but is effecting Chrome at least (and probably all other browsers).

New Places icons are missing in demo page

Hi, irons-icons has been updated, thanks, 'but' new "Places icons" are missing in the demo page.
I know it's not very important as places-icons.html is here, but it's usefull to see all icons and their names to choose.

Thanks.

Fix outbound links

The outbound links to e.g. "iron-icon" don't work. This is an issue all over documentation too.

icons don't appear in Firefox

From @datasynth on July 28, 2015 16:19

These icons (at least) from the default and other sets don't appear in Firefox (39.0):

event-seat, icons-b, flight-land, icons-d, flight-takeoff, gif, indeterminate-check-box, av:airplay, av:b, av:d, av:forward-10, av:forward-30, av:forward-5...and more...from the iron-icons demo page (and other usages).

Copied from original issue: PolymerElements/iron-icon#31

Change yellow icons in the demo to something darker

The yellow icons in the demo are pretty hard to see. A darker shade would be more suitable on white background.

Material Design Icons 2.2.0 is out

Material design icons 2.2.0 has been updated with 41 new icons.
Material design icons: https://github.com/google/material-design-icons/releases

Thanks. :-)

Several icons not show in Firefox

From @shawnsz on October 30, 2015 16:14

Hi,

I'm using Polymer in my website. It's cool. But I found some icons not working in Firefox. Please take a look:
https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html

Several icons not show in Firefox.
browser version: 41.0.2
OS: Windows 7 Professional Service Pack 1.

works fine in Chrome and IE 11

icons:flight-takeoff
icons:event-seat
icons:gif
icons:indeterminate-check-box

Thanks!
Shawn

Copied from original issue: Polymer/polymer#2651

link_off icon is missing

Description

iron-icons element doesn't contain a "link_off " icon, though it's in Material spec.

It would be great to be aligned with the latest Material icons and do not manually add missing ones to a project.

Demo do not show anything

Description

Demo page do not show anything.

Expected outcome

Should see all the icons.

Actual outcome

Nothing shown.

Live Demo

https://www.webcomponents.org/element/PolymerElements/iron-icons/demo/demo/index.html

Steps to reproduce

Visit the demo page.

Browsers Affected

Fix

Delete or comment the dom-repeat tag.

<dom-bind>
    <template is="dom-bind" id="scope">
      <!--<dom-repeat>-->

        <template is="dom-repeat" id="iconsetRepeat">
          <h2>{{item.name}}</h2>
          <!--<dom-repeat class="set">-->
            <template is="dom-repeat" items="{{getIconNames(item)}}">
              <span class="container">
                <iron-icon icon="{{item}}"></iron-icon>
                <div>{{item}}</div>
              </span>
            </template>
          <!--</dom-repeat>-->
        </template>

      <!--</dom-repeat>-->
    </template>
  </dom-bind>

[Request] Add superscript and subscript icons to the editor icon set

iron-icons other than default iron-icons are not displayed on polymer 3

Description

maps icons or communication icons are not displayed

Expected outcome

maps icons like maps:place are to be displayed on

Actual outcome

maps icons are not displayed on polymer 3.
there is no code in build folder about maps etc. there is only js file for default icons.

Live Demo

no demo

Steps to reproduce

if someone can display, my problem is to be ignored.

Browsers Affected

About half of icons not showing in demo in Polymer Element Catalogue

The icons displayed in the demo for the iron-icons element in the Polymer Element Catalogue are being cut off just below the communications set. There's a large white space showing but nothing else. Had a quick look in the devtools but couldn't find any particular reason that the display CSS property is set to none.

Add package version to package.json to enable installation through Yarn

Description

I want to install iron-icons through Yarn directly through GitHub. With a handful of Polymer projects, like app-layout, there is no package.json and the installation works fine. However, with iron-icons and several others, the installation process fails.

yarn add PolymerElements/paper-dialog
yarn add https://github.com/PolymerElements/iron-icons.git
yarn add https://github.com/PolymerElements/iron-icons.git#3e6294c810ceeee980af692815557ad31912a881 (v2.1.0)

Expected outcome

I expect that this works.

Actual outcome

When adding a project via Yarn, it goes to GitHub and tries to read the package.json if it exists. Running yarn with verbose on yields in some interesting results. It tries to look for certain files. In app-layout, these files do not exist. As such, the installation appears to handle that properly and successfully installs the projects.

Performing "HEAD" request to "https://github.com/PolymerElements/app-layout".
verbose 1.293 Request "https://github.com/PolymerElements/app-layout" finished with status code 200.
verbose 1.297 Performing "GET" request to "https://github.com/PolymerElements/app-layout.git/info/refs?service=git-upload-pack".
verbose 1.601 Request "https://github.com/PolymerElements/app-layout.git/info/refs?service=git-upload-pack" finished with status code 200.
verbose 1.612 Performing "GET" request to "https://raw.githubusercontent.com/PolymerElements/app-layout/203838ff0f0cba770e5fe87566abd94b47190e18/package.json".
verbose 1.808 Request "https://raw.githubusercontent.com/PolymerElements/app-layout/203838ff0f0cba770e5fe87566abd94b47190e18/package.json" finished with status code 404.
verbose 1.81 Performing "GET" request to "https://raw.githubusercontent.com/PolymerElements/app-layout/203838ff0f0cba770e5fe87566abd94b47190e18/yarn.json".
verbose 1.921 Request "https://raw.githubusercontent.com/PolymerElements/app-layout/203838ff0f0cba770e5fe87566abd94b47190e18/yarn.json" finished with status code 404.

However, in iron-icons and many other Polymer projects, there is a package.json, but the version property is not included. This causes Yarn to fail.

Performing "HEAD" request to "https://github.com/PolymerElements/iron-icon".
verbose 3.128 Request "https://github.com/PolymerElements/iron-icon" finished with status code 200.
verbose 3.129 Performing "GET" request to "https://github.com/PolymerElements/iron-icon.git/info/refs?service=git-upload-pack".
verbose 3.443 Request "https://github.com/PolymerElements/iron-icon.git/info/refs?service=git-upload-pack" finished with status code 200.
verbose 3.446 Performing "GET" request to "https://raw.githubusercontent.com/PolymerElements/iron-icon/c592bd3f0b442e3e4c1fc574f08545d0f9810d15/package.json".
verbose 3.451 Request "https://raw.githubusercontent.com/PolymerElements/iron-icon/c592bd3f0b442e3e4c1fc574f08545d0f9810d15/package.json" finished with status code 200.
verbose 3.452 Error: Can't add "@bower_components/iron-icon": invalid package version undefined.
    at new MessageError (/usr/local/google/home/fleker/.nvm/versions/node/v8.9.3/lib/node_modules/yarn/lib/cli.js:186:110)
    at PackageRequest.<anonymous> (/usr/local/google/home/fleker/.nvm/versions/node/v8.9.3/lib/node_modules/yarn/lib/cli.js:36413:15)
    at Generator.next (<anonymous>)
    at step (/usr/local/google/home/fleker/.nvm/versions/node/v8.9.3/lib/node_modules/yarn/lib/cli.js:98:30)
    at /usr/local/google/home/fleker/.nvm/versions/node/v8.9.3/lib/node_modules/yarn/lib/cli.js:109:13
    at <anonymous>
    at process._tickCallback (internal/process/next_tick.js:188:7)
error An unexpected error occurred: "Can't add \"@bower_components/iron-icon\": invalid package version undefined.".
info If you think this is a bug, please open a bug report with the information provided in "/usr/local/google/home/fleker/samples/smart-home/smart-home-provider/frontend/yarn-error.log".

I know there's work going on for Polymer 3, although I'm hesitant to switch to it in the short-term. Can these package.json files add a version to enable this type of installation?

Steps to reproduce

npm install -g yarn
yarn add PolymerElements/paper-dialog
yarn add https://github.com/PolymerElements/iron-icons.git
yarn add https://github.com/PolymerElements/iron-icons.git#3e6294c810ceeee980af692815557ad31912a881

Browsers Affected

Affects web development, but not in the browser.

Wrong documentation and title in the element catalog

The element catalog shows the documentation of the iron-iconset-svg. 😕

Also, in the title (at the tab) appears iron-iconset-svg.

rename `core-icons.html` to `iron-icons.html`?

Should we rename this file?

[Request] Add "Remove Link" icon to the editor icon set

Unable to figure out icons for paper-fab

I grabbed the <paper-fab>, and then I wanted an icon. It complained I didn't have the iron icons in the console (ace, love it), so I imported those. But then I couldn't find out which icons are in the iron set (vs any other set), so I went to https://elements.polymer-project.org/elements/iron-icons and that has no documentation.

Feels like we should have a list of icons, and where they come from.

Need a way to load a subset of icons

Currently, you can only load the full set of icons, which is a lot of data if you're only using a few.

drag_indicator icon is missing

Description

iron-icons element doesn't contain a "drag_indicator" icon, though it's in Material spec.

It would be great to be aligned with the latest Material icons and do not manually add missing ones to a project.

Update Icon Documentation

The core-icons documentation had an icon showcase page [https://www.polymer-project.org/0.5/components/core-icons/demo.html} that showed each of the different icon sets and the icons available to them. The current iron-icons element page has no documentation whatsoever, and is in desperate need of an update. It would be good if the documentation was also searchable, to make it easier to find icons.

Minify?

Has anyone tried running the icons sets through an SVG minifier? It's more difficult to run these things through a minifier after-the-fact because everything is wrapped up in HTML.

I tried a few SVG minifiers by copying and pasting the <svg> but they all chocked on the "xlinks" (Error in parsing: Unbound namespace prefix: "xlink"). One claimed a 30% reduction in size without any loss in precision, but it looked the some of the markup was missing.

Request for paper icon expand arrow

This a request for a paper icon expand arrow that is used in Google Design's examples for cards.

Unable to display some icons

I don't know why but I'm not able to display 'attach-file' and 'attach-money' icons. Within the demo it's working, but outside, no.

This is what my code look like :
<iron-icon icon="attach-money"></iron-icon>

Can someone help me ? Thx

update `iron-icons` demo to reflect `icon-iconset-svg` api change

Must use icon-iconset-svg:getIconNames() instead of icon-iconset-svg:iconNames.

See PolymerElements/iron-iconset-svg#11

Missing/corrupt icons

Some in the default icon set are missing/corrupt: icons:b, icons:a, etc

TypeError: this._meta.byKey is not a function when used in Angular 7

Description

When building/serve a project with es5
Console shows error for iron-icon - TypeError: this._meta.byKey is not a function
at HTMLElement._updateIcon (iron-icon.js:142)

No icons are displayed.

Expected outcome

Icons should be visible.

Actual outcome

No icon.

Steps to reproduce

Steps followed from https://www.npmjs.com/package/@codebakery/origami for Angular 7 - Polymer 3 Integration. Other component works as expected.

Browsers Affected

Docs and demo for iron-icons are missing

See
https://elements.polymer-project.org/elements/iron-icons

Docs page is empty
Demo is missing

is there any icon for json format symbol - { }

I was looking for json format icon

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

Thanks
Sai

[Request] File-related icons not found

It would be useful if the file-related icons (seen in the Google Drive) application were also available as an iconset. In particular, the document, spreadsheet, slides, (and their MS Office equivalents), and a PDF icon.

IE: Unable to get property 'add' of undefined or null reference

In IE (any version), iron-icons do not render and the following error prints in the console:

Unable to get property 'add' of undefined or null reference

The offending code seems to be in style-transformer.html.

--layout-flex-1 mixin used iron-flex-layout doesn't provide it

https://github.com/PolymerElements/iron-icons/blob/master/demo/index.html#L84 uses --layout-flex-1 but iron-flex-layout only provides --layout-flex-2 to --layout---layout-flex-12`. Is this a bug or do I miss something?

Change checkbox icons

Your links in the read me don't work and I am curious of how to change the icons for check boxes to some svg or png image. I have code where I am hoping to not have to rewrite a lot but just change those icons.
Best regards

Icon does not render correctly.

Description

Found icon does not render for some unknown reason.

Expected outcome

All SVG icons render correctly.

Actual outcome

Only some icons are rendered.

Live Demo

http://jsbin.com/puziponexu/2/edit?html,output

Steps to reproduce

Browsers Affected

Links in the Readme lead to a 404

The attached links in the last two lines of the Readme leads to a 404 error.

These are the lines:
See iron-icon for more information about working with icons.

See iron-iconset and iron-iconset-svg for more information about how to create a custom iconset.

where, iron-icon, iron-iconset and iron-iconset-svg lead to a webpage not found on Github.

Browser and OS used:
Google Chrome on OSX.

Polymer 1.0 default icon set in iron-icons not working

After upgrading to Polymer 1.0, default core-icons set is not working. I am trying to use home icon from the default icon set.

HTML code fragment:

    <link rel="import" href="/components/iron-flex-layout/classes/iron-flex-layout.html">
    <link rel="import" href="/components/iron-icons/iron-icons.html">
    <link rel="import" href="/components/iron-icons/communication-icons.html">
    <link rel="import" href="/components/iron-form/iron-form.html">
    <link rel="import" href="/components/iron-selector/iron-selector.html">
    <link rel="import" href="/components/iron-pages/iron-pages.html">

    <!-- OOTB paper elements -->
    <link rel="import" href="/components/paper-drawer-panel/paper-drawer-panel.html">
    <link rel="import" href="/components/paper-header-panel/paper-header-panel.html">
    <link rel="import" href="/components/paper-toolbar/paper-toolbar.html">

    <link rel="import" href="/components/paper-icon-button/paper-icon-button.html">
    <link rel="import" href="/components/paper-material/paper-material.html">

    <link rel="import" href="/components/paper-menu/paper-menu.html">
    <link rel="import" href="/components/paper-item/all-imports.html">

    <link rel="import" href="/components/paper-tabs/paper-tab.html">
    <link rel="import" href="/components/paper-tabs/paper-tabs.html">
    <link rel="import" href="/components/paper-tabs/paper-tabs-icons.html">

<paper-icon-item id="socialFeed">

        <iron-icon icon="home" item-icon></iron-icon>

        <paper-item-body two-line>
          <div>Social Feed</div>
          <div secondary>2 Unread FB Posts</div>
        </paper-item-body>

</paper-icon-item>

I am getting a warning in Chrome debugger:[iron-icon::_updateIcon]: could not find iconset icons, did you import the iconset? @ line#167 in iron-icon.html

Debugging showed that in line 163 in iron-icon.html which is

this._iconset = this.$.meta.byKey(this._iconsetName);

this._iconsetName has value "icons" but this._iconset is undefined.

Am I missing some import or something here?

Demo code is not working

Description

Following the instructions on the setup page doesn't show the icon.

Expected outcome

Following the instructions exactly should show the demo icon.

Actual outcome

Element is rendered and styling is applied but icon is not showing.

Live Demo

Don't have a live demo, no online editor is available?

Steps to reproduce

Recreate the demo page from iron-icons

Browsers Affected

Solution / workaround

The import lines are sorted wrong, iron-icons should be loaded first and iron-icon second.

<script type="module">
    import '@polymer/iron-icon/iron-icons';
    import '@polymer/iron-icons/iron-icon';
  </script>

dependency ordering problem

iron-icons imports iron-icon before it defines any icons. This creates a race condition where under some circumstances (generally dynamic loading) icon instances upgrade before the iconset is available.

Putting the iron-icon import at the bottom of the file solves the problem for iron-icons specifically, but if one were to subsequently load one of the other icon sets, you have the same problem (dependent icon instances may have already upgraded).

Either iron-icon has to be able to adapt to lazily loaded iconsets, or we have to remove iron-icon import from icon-sets and require users to import iron-icon only after all iconsets are loaded (or otherwise synchronize manually [i.e. avoid creating dependent icons before the necessary icon-set is loaded]).

Iron icons in chrome do not work

Some icons (seems to be the icons under the "icons:" set of icons whereas icons in "communications:" work)
In the chrome inspect tool, the icon is detectable but is not visible.

DOES NOT work on Chrome

Version 51.0.2704.79 (64-bit) on Mac Book Pro OS X El Captain Version 10.11.4

DOES work on Safari

Version 9.1 (11601.5.17.1)

Expected Results:

no error is thrown
icon will be present but svg is not generated

polymerelements / iron-icons Goto Github PK

iron-icons's Introduction

<iron-icons>

Usage

Installation

In an HTML file

In a Polymer 3 element

Contributing

Installation

Running the demo locally

Running the tests

iron-icons's People

Contributors

Stargazers

Watchers

Forkers

iron-icons's Issues

Cross-Site Request Forgery - At Line: 259 of File: frontend/src/static/bower_components/iron-ajax/test/iron-ajax.html

Description

Expected outcome

Actual outcome

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Fix

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Steps to reproduce

Browsers Affected

Description

Description

Expected outcome

Actual outcome

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Solution / workaround

DOES NOT work on Chrome

DOES work on Safari

Expected Results:

Browsers Affected

Recommend Projects

Recommend Topics

Recommend Org