polymerelements / iron-icon Goto Github PK

View Code? Open in Web Editor NEW

40.0 17.0 39.0 404 KB

Element that displays a single icon

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

HTML 60.89% JavaScript 39.11%

iron-icon's Introduction

<iron-icon>

The iron-icon element displays an icon. By default an icon renders as a 24px square.

See: Documentation, Demo.

Usage

Installation

npm install --save @polymer/iron-icon

In an HTML file

<html>
  <head>
    <script type="module">
      import '@polymer/iron-icon/iron-icon.js';
    </script>
  </head>
  <body>
    <iron-icon src="demo/location.png"></iron-icon>

    <!-- You can use an icon from an imported iconset. -->
    <script type="module">
      import '@polymer/iron-icons/iron-icons.js';
    </script>
    <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';

class ExampleElement extends PolymerElement {
  static get template() {
    return html`
      <iron-icon src="demo/location.png"></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-icon
cd iron-icon
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-icon's People

Contributors

Stargazers

Watchers

iron-icon's Issues

Change the icon when iron-icon already exists in DOM

Hello everyone,

is it possible to change the currently used and displayed icon of a iron-icon, which is already existing in the DOM?

I tried "icon.setAttribute('icon', "hardware:keyboard-arrow-right");", but i guess that can't work without a "reevaluate" of the iron-icon itself.

Is there a way to accomplish this "on the fly" icon change?

Regards,
Michael

Description

How can I colorize the iron icon (with polymer css variable) if it load an external image (like png, svg)?
I set the --iron-icon-fill-color variable in css section, but it seems not works for me.

Expected outcome

red icons

Actual outcome

black icons:

Live Demo

https://jsfiddle.net/szamok/1mk636zz/7/

Version

Polymer: 2.3.1

Description

Sometime there's the need to have a round image, but now there's now clean way to do this.

Using shady dom we could use
iron-image ::content img { border-radius: 50%; }

Using shadow dom there's no way to get a round image.

Expected outcome

The image loaded through src attribute has the right border-radius value.

Actual outcome

Shady:
http://jsbin.com/fejojawuwi/edit?html,output

Shadow:
https://jsbin.com/xosadeqixa/edit?html,output

Live Demo

Browsers Affected

Mention polyserve

I think this repository--similar to most of the other repositories--should mention polyserve. Anyone new to Polymer and interested in loading demo/index.html most likely will confront two problems:

They will receive errors that the imported HTML files are not found.
They will change the values of the hrefs and then receives a CORS error.

Chrome Cannot Find Iconset

Seeing this error in the console only on chrome.

iron-icon.html:167 [iron-icon::_updateIcon]: could not find iconset icons, did you import the iconset?

This happens for all iconsets that are included and I try to use. I also tried changing the import order of iron-icons.html to before and after the iconsets are imported and nothing changes.

Icons from the icon sets show up fine in FABs and other items.

Chrome:

Safari osx and iOS:

iron-flex-layout.html is deprecated

Support style mixin

I want to use the Fontawesome SVG fonts icons using a iron-iconset-svg and need to set a few CSS settings like

font-family
font-size
dominant-baseline
text-anchor
Currently only width and height are supported

I want to get rid of the /deep/ in this CSS

  * /deep/ core-icon text.bwu-fa-icon {
    font-family: "FontAwesome";
    font-size: 24px;
    dominant-baseline: central;
    text-anchor: middle;
  }

Full example at https://github.com/bwu-dart/bwu_fontawesome_iconset_svg/blob/master/lib/bwu_fontawesome_iconset_svg.html#L15

In my case icons are SVG font glyphs.

expose iconName and iconsetName as read-only properties (for testing)

Because of tools like poly-icon.appspot.com, an iron-icon's icon name may change when an app creates its own iconsets. A test that checks icon.name == 'icons:clear' would fail if icon.name becomes 'my-app:clear'.

It would be cool if the icon name (the part after the :) were a gettable property, so tests could verify the icon name without being dependent on whatever the iconset name is.

SVG icons are focusable in Edge/IE

Description

In both Edge and IE11, when iron-icon is used in conjunction with SVG iconsets, the SVG elements inserted into the DOM inside <iron-icon> get tab stops. This occurs even with a tabindex="-1", since apparently that's part of the SVG2 spec, which IE does not yet support.

Expected outcome

SVG elements should not be focusable and not be part of the document's tab order. For users using only the keyboard to navigate the document, this presents an accessibility issue.

Actual outcome

In IE and Edge, SVG elements are focusable and receive an unexpected tab stop as the user tabs through the document.

Live Demo

https://jsbin.com/subavuciji/edit?html,output

Steps to reproduce

Put an <iron-icon> element in the page.
Set the icon attribute and point it at an SVG imageset (e.g. something from iron-icons)
Open the page in IE11 or Edge
Use the tab key to navigate the page. Notice that the SVG element receives a tab stop.

Browsers Affected

Potential Fix

From this article on StackOverflow:

Set the focusable attribute to false: <svg focusable="false"></svg>

Size cannot be set using CSS when using sprite iron-iconset

Having defined an iron-iconset:

<iron-iconset name="foo"
              src="sprite.png"
              size="256"
              width="2048"
              icons="bar baz">
</iron-iconset>

And using it like this:

<iron-icon icon="foo:bar"></iron-icon>

It seems impossible to set the icon's size using e.g.:

<style is="custom-style">
    iron-icon {
        --iron-icon-height: 90px;
        --iron-icon-width: 90px;
    }
</style>

The size of the sprite is applied to the icon in _addIconStyles of iron-iconset, and iron-icon does not override it.

New stroke should default to `none`

stroke: currentColor affects the weight of the icon. See the clock example with stroke: currentColor:

stroke: none preserves 1.0.5's look:

Demo URL shows 404

The demo link in the README links to 404 error.

https://www.polymer-project.org/components/iron-icons/demo.html

Mobile A11y Testing 11/1

I'm not able to access the icons with talkback. Should I be able to? If not for this demo, feel free to close.

Safari: setting CSS width or height does nothing to set the size of the icon

http://jsbin.com/noxaju/3/edit

Chrome (above) vs Safar (below)

The icon unexpectedly (and differs from 0.5 behavior) takes the size of the nearest positioned parent (as per regular CSS rules)

link to iron-icons broken

Description

The iron-icon demo references the iron-icons demo, but links using the following URL :

/elements/iron-icons?view=demo:demo/index.html

Expected outcome

Should probably link to :

/PolymerElements/iron-icons/v1.2.0/iron-icons/demo/index.html

(which seems to work when I edit the anchor) or something.

Actual outcome

404

bad escape in code example

On https://elements.polymer-project.org/elements/iron-icon there are some instances of sample code not being escaped correctly. E.g.:

How do you set the svg viewBox of a icon?

I have a 75px viewbox designed icon and need to set the viewbox to 75 instead of 24 else you only see part of the icon in the (24x24) box and yes I tried fiddling with this
<iron-iconset-svg name="gender-icons" icon-size="75">
Anyway this should be the result and I can only achieve it with the chrome inspector en edit the viewbox

Node it has nothing to do with the size of the icon as you can see (24x24) is fine its the viewbox that needs to be changed only.

iron-icon accessibility report

Here are the accessibility developer tools audit results:

[Warning] Images should have an alt attribute (1)[Warning] Text elements should have a reasonable contrast ratio (1)Not applicable tests (9)Passing tests (4)

The only issue here is that the icons don't have labels, so when using a screen reader, you don't receive info about what the icons are for/represent. I know this is simply a demo page, so it's not a concern at all. Would be good to make sure it's very easy for developers to add alt text appropriately though.

Move <template> to _template.

What about move all <template> to _template?
If this is done and application builded to one js file, firefox has badass improve performance

Iron icon won't disappear if assigned with ""

Description

If an element has no icon assigned when attached, it stays empty without error. When you assign an icon it displays it, but when you un-assign the icon it keeps the last assigned icon forever.
Example:
https://jsfiddle.net/sasntsjf/2/

Expected outcome

When the icon property is assigned to null or "", the icon should disappear.

Actual outcome

When the icon property is assigned to null or "", the last assigned icon is still displayed.

Live Demo

https://jsfiddle.net/sasntsjf/2/

Steps to reproduce

Assign a value to the icon property
Assign "" to the icon property

Browsers Affected

All, it's a problem of behaviour.

1.0.11 polylint error

Description

The iron-icon v1.0.11 element causes polylint to fail.

Expected outcome

polylint doesn't fail.

Actual outcome

../iron-icon/iron-icon.html:105:3
Property isAttached not found in 'properties' for element 'iron-icon'

Steps to reproduce

npm install polylint && bower install iron-icon
html import iron-icon
polylint

Move template to js

What about move all to _template.
If this is done for all components and application builded to one js file, firefox has badass improve performance.

iron-icon `icon` takes precedence over `src` contrary to docs

Description

The docs state that iron-icon.src takes precendence over iron-icon.icon, but a test shows that the opposite is true.

Expected outcome

The image specified by src is shown.

Actual outcome

The icon specified by icon is shown.

Live Demo

http://codepen.io/tony19/pen/Pzyxdw?editors=1000

Steps to reproduce

Add to the page an iron-icon element with both src and icon.
Open the page in a web browser (Chrome).

Browsers Affected

Perf regression in 2.x

Description

Due to changes in 2.x around how undefined properties are handled in multi-prop observers, a simple usage of iron-icon can result in the SVG being cloned 5 times, rather than once, which shows up as a serious performance regression. The element should be updated to take into account the new undefined rules in observers.

Steps to reproduce

https://jsbin.com/suvoyer/edit?html,output

<iron-icon icon="favorite"></iron-icon>

Add a breakpoint in iron-icon.html:_updateIcon and note that the call to this._iconset.applyIcon() (which clones the SVG) is called 5 times.

Browsers Affected

All

icons don't appear in Firefox

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).

The link to the iron-icons demo is dead and not working

Is there anywhere where we can get an overview of all icons except for the 0.5 version of this?

Thanks

Where can I find API docs

Description

Github page links to https://www.webcomponents.org/element/PolymerElements/iron-icon

Expected outcome

I would like to see API described, like attribute I can set, their default values and behavior.

Actual outcome

There is no such thing.

Live Demo

https://www.webcomponents.org/element/PolymerElements/iron-icon

Steps to reproduce

Browsers Affected

Reflect `icon` to attribute for styling

It would be great if the icon property were reflected to an attribute, then we could style icons using an attribute selector.

E.g.

<style>iron-icon[icon="my-icon"] { color: green; }</style>
<iron-icon icon="my-icon"></iron-icon>

This would allow you to define colors for all your icons in a style module and apply them without having to add an id or class to the iron-icon.

Alternatively iron-icon could add my-icon as a class.

Looks like this feature has been PRed before #69

Avoid using `custom-style` to set defaults

https://github.com/PolymerElements/iron-icon/blob/master/iron-icon.html#L80

Prefer instead, e.g.:

width: var(--iron-icon-width, 24px);

Add mixin to style img tag when src is defined

Description

Not able to style the <img> tag inside iron-icon. It would be helpful for use case where a paper-icon-button can be created with rounded corner.

Inline SVG tree if an SVG file is specified as src

If you specify a PNG, GIF, JPG or similar as src of the iron-icon, a corresponding img tag is rendered in the DOM. SVG is also rendered using an img tag. Would be great if the iron-icon would place the svg tree from the SVG file in the DOM instead, thus allowing the user to apply fill and stroke.

Deprecation notice from flex layout

Description

As per the notation at https://github.com/PolymerElements/iron-flex-layout/blob/master/classes/iron-flex-layout.html#L14 modules should no longer be referencing the iron-flex-layout/iron-flex-layout.htm document.

Expected outcome

No console warning

Actual outcome

Can I load a fallback icon when I fail to load the desired icon

Is there any chance to load a different icon when the icon I want failed to load?

`TypeError: this._meta.byKey is not a function` error with webcomponentsjs 1.0.5

Description

TypeError: this._meta.byKey is not a function error in firefox and edge but not in chrome (not tested in safari, ie) when using webcomponentsjs 1.0.5, works with webcomponentsjs 1.0.4.

Live Demo

http://jsbin.com/wuceranate/1/edit

Browsers Affected

Chrome
Firefox
Edge

Versions

Polymer: v2.0.2
webcomponentsjs: v1.0.5
iron-icon: v2.0.1

Unable to switch between icon and image display

See this jsbin: http://jsbin.com/boruva/edit?html,output

I would like to switch between the polymer logo and the 'check' icon using a single <iron-icon>
The 'Toggle' button sets/unsets the icon and src properties

As long as you use the same image type you can change the image as much as you want. But switching from icon to src doesn't work

PR #48 fixes this issue

iron-icons not rendering on Firefox

Several of the icons are not rendering on Firefox. This can be verified by using Firefox on the demo page at: https://elements.polymer-project.org/elements/iron-icons?view=demo:demo/index.html&active=iron-icons

Non-rendering icons include: b, d, indeterminate-check-box, & gif.

I have verified that the generated svg code renders by itself properly. So it appears to have to something with the svg or g wrapping elements.

changing color doesn't work as documented

The documentation says:

    --iron-icon-fill-color: green

However this doesn't seem to work on my side ( "polymer": "~1.2.1", "iron-elements": "~1.0.4").
Also the width/height change attributes don't seem to take effect.

html:

<iron-selector id="tool-box" attr-for-selected="name" selected="polygon">
    <iron-icon class="tool-box-icon" name="polygon" src="images/IconTool_BLACK/IconTools_Path_black.svg"></iron-icon>
    <iron-icon class="tool-box-icon" name="compare" src="images/IconTool_BLACK/IconTools_Compare_black.svg"></iron-icon>
    <iron-icon class="tool-box-icon" name="freehand" src="images/IconTool_BLACK/IconTools_Brush_black.svg"></iron-icon>
    <iron-icon class="tool-box-icon" name="text" src="images/IconTool_BLACK/IconTools_Text_black.svg"></iron-icon>
</iron-selector>

css:

.tool-box-icon .iron-selected {

  --iron-icon-fill-color: white;
}

.tool-box-icon *:not(.iron-selected):hover {

    --iron-icon-fill-color: blue;

}

[0.9] Sizing not applied from classes

In 0.9.0-rc.1, iron-icons can no longer be styled via a CSS class. For some reason, the ".-iron-icon-0" class is always applied to the icon with a height and width of 24px.

Style should be moved inside the template

Description

<style> elements should be moved inside the template for future compatibility.

https://github.com/PolymerElements/iron-icon/blob/master/iron-icon.html#L86

Let the user set an alt on the image

iron-icon has no way for us developers to help disadvantaged users who use a screen reader to understand what the meaning of the icon in this situation is.

Expected outcome

We as developers define an alt-attribute on the element and a screen reader announces the text provided in the ways ARIA best practices define.

Actual outcome

There is no way official way to announce a text.

Live Demo

<iron-icon icon="icons:accessibility" alt="Example for icon accessibility"></iron-icon>

Setting icon before element ready throws exceptions

If .icon is set before .meta is created, an exception is thrown. We should delay updating the icon until .meta is ready.

Mirrored icons for RTL are shifted over (shadow DOM)

Happens in shadow DOM. Seems like the transform is working a bit differently.
http://jsbin.com/geyejexuhi/edit?html,output

bower.json warning

bower iron-icon#*                invalid-meta iron-icon is missing "ignore" entry in bower.json

Inconsequential, I think, but it'd be nice to get it fixed - it kind of stands out against the other elements (well, some others also evoke this message, but not many).

icon name as class: `<iron-icon class="iron-icon menu"></iron-icon>`

hi,

to get the icon name, we have to resort to a computed binding:

<iron-icon icon="{{_iconName}}"></iron-icon>

if would be nice if one could set the icon using css alone.

.iron-icon.some-menu {
// use the icon="menu" somehow?
}

myVal = 'some-menu';
<iron-icon class="iron-icon {{_myVal}}"></iron-icon>

iron-icon.html causes unexpected Polymer.Base.create is not a function

Description

The iron-icon element causes the own web-component does not load properly.

Expected outcome

The web component loads properly.
There are no errors in the console.

Actual outcome

The web-component does not load its content and the console shows the following error:
Uncaught TypeError: Polymer.Base.create is not a function
at iron-icon.html:142
Uncaught TypeError: Cannot read property 'tagName' of null

Live Demo

Steps to reproduce

We think there is no need to reproduce the steps. The main problem is to know where is the origin of the error message.

If it is needed, we can include a brief explanation.

Browsers Affected

Chrome -> V

Error in Edge ( 14 ) on WIN10 when you use iron-icon while using polymer-webpack-loader

Description

I reported this bug first at polymer-webpack-loader under Banno/polymer-webpack-loader#58 but I found out this more iron-icon problem then a polymer-webpack-loader problem or at least it can be fixed easly in iron-icon

Expected outcome

that iron-icon works correctly when you using polymer-webpack-loader in Edge

Actual outcome

that iron-icon works correctly when you using polymer-webpack-loader in Edge

Live Demo

See Banno/polymer-webpack-loader#58

Steps to reproduce

See Banno/polymer-webpack-loader#58

Browsers Affected

nge colorof iron icon

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

iron-icon hidden attribute does not work inside shadow root

Description

When using iron-icon inside a shadow root the global [hidden] { display: none; } CSS rule gets blocked and iron-icon stays visible.

Expected outcome

The hidden attribute should apply display: none;

Live Demo

https://jsbin.com/xidewewaki/2/edit?html,output

Browsers Affected

Disappearing icons in Chrome

I have noticed an odd bug in Chrome. The icons work as expected in both Firefox and Safari. But, in Chrome, sometimes the icons are displayed and other times they do not. I do not have any errors showing in the console in both cases. If I refresh the site enough, they will show eventually.

The odd thing is that when they do not display, the rendered HTML is as follows:

  <iron-icon icon="language" class="style-scope respond-languages-toggle x-scope iron-icon-0">
    <iron-meta id="meta" type="iconset" class="style-scope iron-icon"></iron-meta>
  </iron-icon>

When they do display, the rendered HTML is as follows:

<iron-icon icon="search" class="style-scope respond-search-toggle x-scope iron-icon-0"><svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" class="style-scope iron-icon" style="pointer-events: none; display: block; width: 100%; height: 100%;"><g class="style-scope iron-icon"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" class="style-scope iron-icon"></path></g></svg>
    <iron-meta id="meta" type="iconset" class="style-scope iron-icon"></iron-meta>
  </iron-icon>

The iron-icon is loaded in another component. You can view the source here:
https://github.com/madoublet/respond/blob/dev/site/components/respond-search-toggle.html

You can see a demo of this behavior here: http://dev.respondcms.com/sites/one/index

There should be a search icon in the circle in the top right.

Issue with Polymer Catalog

I apologize in advance but I did not know where to post this issue. So I posted it to the place I found the bug.

The following url I received by selecting the link under the main iron-icon page
https://elements.polymer-project.org/elements/iron-icon?view=demo:demo/index.html

I followed the previous link then selected the link in the contents on the catalog page.
"This demo is for a single . If you're looking for the whole set of available icons, check out the demo."

Which took me to following link

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

which shows the weird bug I found.
https://elements.polymer-project.org/elements/iron-icon?view=demo:demo/index.html

polymerelements / iron-icon Goto Github PK

iron-icon's Introduction

<iron-icon>

Usage

Installation

In an HTML file

In a Polymer 3 element

Contributing

Installation

Running the demo locally

Running the tests

iron-icon's People

Contributors

Stargazers

Watchers

Forkers

iron-icon's Issues

Description

Expected outcome

Actual outcome

Live Demo

Version

Description

Expected outcome

Actual outcome

Live Demo

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Potential Fix

Description

Expected outcome

Actual outcome

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Steps to reproduce

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Steps to reproduce

Browsers Affected

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected

Description

Description

Expected outcome

Actual outcome

Description

Live Demo

Browsers Affected

Versions

Description

Expected outcome

Actual outcome

Live Demo

Description

Expected outcome

Actual outcome

Live Demo

Steps to reproduce

Browsers Affected