polymerelements / iron-iconset-svg Goto Github PK

Hi, how can I add and use a new icon on a custom iron-iconset-svg after my application is rendered? We have created at first a custom list of icons in a iron-iconset-svg, but while using the application other icons are create and we need to add them in ironList and use them like the other icons.

I was writing a demo page for a custom iconset and was puzzled when it returned lots of stuff that was not icons at all.

It turns out the selector just looks for any element with an id-attribute, and I think that's a bit too lax. After I adjusted it to defs > g[id], it worked as I had expected it to, but then again, I don't know if this may ruin other stuff. Any comments?

    _createIconMap: function() {
      var icons = Object.create(null);
      Polymer.dom(this).querySelectorAll('defs > g[id]')
        .forEach(function(icon) {
          icons[icon.id] = icon;
        });
      return icons;
    },

I have an SVG, but when i look at the demo twitter icon, the format is completely different
Can you give me some advise here please.

Here is my SVG:

So looking at the demo the vector format looks completly differerent:

Description

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

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-iconset-svg?view=demo:demo/index.html

Steps to reproduce

1. Open https://github.com/PolymerElements/iron-iconset-svg,
2. Open https://www.webcomponents.org/element/PolymerElements/iron-iconset-svg

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Description

When importing a large HTML bundle, Chrome can parse it in pieces. If an iron-iconset-svg definition is broken across multiple pieces, then only the icons in the first piece (the one with the opening tag) are available in the icon map. Other icons will be blank.

Expected outcome

The icon map should be complete. Either wait until the closing tag or incrementally build the icon map.

Actual outcome

The icon map is incomplete, containing only the icons in the same piece of HTML that has the opening tag. Note this doesn't happen if you HTML import first, then register because HTML imports should block.

Live Demo

Steps to reproduce

1. Register the iron-iconset-svg component.
2. Import a large HTML bundle. Not sure the best way to get it to parse in pieces, but perhaps loading the main thread with work might help.
3. Observe the icon map is incomplete. You can also look at the timeline in dev tools to confirm the HTML bundle has been parsed in pieces.

Browsers Affected

This was detected in Chrome. I haven't tried in other browsers.

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

When clearing the icon from an iron-icon element, the local dom isn't cleared properly on browsers not supporting shadow DOM natively (Safari, Edge, IE).

This is due to the fact that removeIcon doesn't try to access to the element's local DOM root whereas applyIcon does.

PR #44 fixes the issue

I am unable to access the icons or alt text using a screen reader.

I cannot navigate to the icons using the keyboard only (which is fine since they are not buttons). That said, when I use the mouse to hover over them, there is an animation that occurs, which I cannot reproduce using keyboard only. Should these be keyboard navigable then to trigger this animation?

On Android, note that I can't access any of these icons using Talkback. Should I be able to in this demo?

Description

The iron-iconset-svg defined svg element doesn't link to the class styles on IE11/Edge, when I put a style tag out of g tag and defined some classes, the element in the group seems unaffected.
I found a similar issue, please refer to this https://github.com/iconic/SVGInjector/issues/23

Expected outcome

defined classes should affected.

Actual outcome

defined classes unaffected.

Steps to reproduce

1. define a svg element in iron-iconset-svg.

<iron-iconset-svg name="mea-ai-44" size="44">
    <svg>
        <defs>
            <g id="play">
                <style type="text/css">
                    .st0{fill: #0B9EDA;}
                    .st1{fill: #FFFFFF;}
                </style>
                <path class="st1" d="M17.3 28.4V15.3l13.1 6.5L17.3 28.4zM19 18.1v7.6l7.6-3.8L19 18.1z"/>
                <path class="st0" d="M22 44C9.9 44 0 34.1 0 22S9.9 0 22 0s22 9.9 22 22S34.1 44 22 44M22 2C11 2 2 11 2 22c0 11 9 20 20 20 11 0 20-9 20-20C42 11 33 2 22 2"/>
            </g>
        </defs>
    </svg>
</iron-iconset-svg>

1. Use it in any html.

<iron-icon icon="mea-ai-44:play"></iron-icon>

you can see the icon is black, because the defined classes unaffected.
When I used in-line styles, all correct.

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10 (doesn't test)

Description

When RTL is on and the icon is mirrored, if an icon is instantiated to early, then all icons are not mirrored. When computedStyle of direction is checked, the direction is still "" (which becomes rtl later, but not at the time of created).

Expected outcome

Icons are always mirrored when specified in RTL.

Actual outcome

Icons are sometimes not mirrored even if a top level element has dir="RTL".

when mirroring icons is turned on, _targetIsRTL is getting called for every icon on the page. Because the logic in targetIsRTL contains getComputedStyle, there is a performance hit for running this on too many items in the page.

@bicknellr This has to do with the 2.0 preview branch

In iron-iconset-svg, applyIcon tries to get the shadow root using element.root.

The first time this is run (I believe that this may be on attached) element.root seems to return a document fragment instead of the shadow root. It also seems as if the contents of that element (the element typically being an iron-icon) have not been stamped yet.

Every time after first render, it seems as if element.root is a proper shadow root. This causes issues because we set element.root._svgIcon = svg in applyIcon's return statement. This means that when removeIcon is run, it cannot remove the first icon which results in an icon in both the document fragment and the shadow root when you change the icon in iron-icon (because changing the icon runs applyIcon again).

Here is a screenshot of what happens.

The icon on the right was applied to the document fragment and the icon on the left was applied to the shadow root. The only one that toggles / changes when iron-icon.icon changes is the one on the left because we can now only access the shadow root.

Description

When <iron-iconset-svg> is used in a page with right-to-left (dir="rtl") direction, with an icon that mirrors itself, on a browser which supports native Shadow DOM, the icon is mirrored from the incorrect origin. This results in it being positioned outside its container.

Right-to-left (incorrect origin)

Left-to-right (correct origin)

Expected outcome

The icon should mirror along its center horizontal and vertical axes.

Actual outcome

The icon mirrors

Live Demo

Make sure you're using Chrome:
https://jsbin.com/jotojuzuru/edit?html,output

Steps to reproduce

1. Create an <iron-iconset-svg> with rtl-mirror="true"
2. Inside, put an icon that requires mirroring using the mirror-in-rtl="true" attribute
3. Use that icon inside a page with right-to-left direction (dir="rtl" on the <body> or <html> elements)
4. Visit the page in a browser that supports native Shadow DOM
5. Notice that the icon is mirrored along the incorrect origin
6. Switch to shady DOM and notice the origin is now correct

Sample code:

<link rel="import" href="../iron-icon/iron-icon.html">
<link rel="import" href="../iron-iconset-svg/iron-iconset-svg.html"/>
<iron-iconset-svg name="example" size="18" rtl-mirroring="true">
  <svg>
    <defs>
      <g id="chevron-right" mirror-in-rtl="true">
        <path d="M5.49 15.61a1.5 1.5 0 0 1-.1-2.12L9.47 9 5.39 4.51a1.5 1.5 0 1 1 2.22-2.02L12.62 8A1.474 1.474 0 0 1 13 9a1.524 1.524 0 0 1-.38 1l-5.01 5.51a1.5 1.5 0 0 1-2.12.1z"/>
      </g>
    </defs>
  </svg>
</iron-iconset-svg>
<div style="display:inline-block;border:1px solid red;">
    <iron-icon icon="example:chevron-right"></iron-icon>
</div>

Browsers Affected

• Chrome
• Firefox
• Safari 9
• Safari 8
• Safari 7
• Edge
• IE 11
• IE 10

Possible Fix

Add transform-origin: center; to the CSS which is performing the transform.

Description

Any SVG elements written by iron-iconset-svg will be put into the tab order of the page in IE11.

Expected outcome

SVG elements should not be focusable by default

Adding this line of code in the _prepareSvgClone function fixes the problem:
svg.setAttribute('focusable', false);

I'm trying to define my iconset-svg using symbol instead of g but isn't working. The icon isn't rendered. If i define some icon using it works.

The code:

<iron-iconset-svg name="br-icons">
  <svg style="display: none">
    <defs>    
        <symbol id="icon-menu" viewBox="0 0 1024 1024">
        <title>menu</title>
        <path class="path1" d="M64 192h896v192h-896zM64 448h896v192h-896zM64 704h896v192h-896z"></path>
      </symbol>
 </defs>
</svg>
</iron-iconset-svg>

 <iron-icon icon="br-icons:icon-menu"></iron-icon>

Some idea?

Tks

It seems fairly trivial to add non-square icons. All one would have to do is change line change the cloneIcon function to allow for an x-size and a y-size and then change the set viewBox function to reflect this change. But perhaps there is a reason you only allow square icons.

Is there a reason we couldn't have an size for length and width so we could add non-square icon sets?

The demo page here does not contain any visible text (or code) to describe it.

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

In RTL, certain icons are flipped (see https://material.google.com/usability/bidirectionality.html#bidirectionality-rtl-mirroring-guidelines). There should be a way to specify that icons should be flipped in RTL mode and the specified icons should be flipped when the direction is RTL.

Description

It already currently exists two mood emoticons in the set. One for "positive" mood, another for "negative" mood, "mood" and "mood-bad" respectively. I believe it would be a good idea to add a "neutral" mood emoticon to this set. That way we can use this three emoticons in forms where users can rate/evaluate/assess something's grade/satisfaction/usefulness.

Expected outcome

An additional svg description of a neutral mood emoticon to the set of icons.

Actual outcome

I am currently using the "face" icon for the neutral emoticon. But it doesn't match so good with the design of the "mood" and "mood-bad" icons.

Example of neutral mood faces

grading emoticons example

I created pull request #20 to address this for consideration. Thanks!

The example states you need id and iconSize:

 <iron-iconset-svg id="my-svg-icons" iconSize="24">

whereas in the code you require

 <iron-iconset-svg name="my-svg-icons" size="24">

I was expecting this element not to display, as it just defines an icon to be used elsewhere.

I created one with a small element I wanted to include as an icon (a calendar) and started by putting just after the body tag. But then my element didn't start at the top of the page

I was able to make it disappear by adding the attribute style="display:none;"

Component page link in readme doesn't work. Would love to check more of this out if you have another link. Thanks!

This element seems so different from others that its taken a while to figure out, yet the Readme (or the Overview on webcomponents.org) doesn't really give any clue as to how to use it. The main issue is that you don't actually use <iron-iconset-svg> in your custom element template.

The demo on the other hand does show an approach to making and using a custom icon set that is useful. If the readme contained something like the following as instructions for use:-

1. Create an html file (called, lets say my-iconset.html) with <iron-iconset-svg name="my-iconset-name"> ..."desired svg icons" ... </iron-iconset-svg> as its contents, You will need to to import bower-components/iron-iconset/iron-iconset.html and as an optionally convenience also import bower_components/iron-icon/iron-icon.html as it avoids the user of these icons from having to do so.
2. In a custom element that wants to use one of these icons then html import my-iconset.html and then in the template of the custom element insert <iron-icon icon="my-iconset-name:iconname"></iron-icon>

It seems to me this issue still applies :

googlearchive/core-iconset-svg#3

Is it not trivial to use some other attribute than 'id' to avoid conflicts with other ids used in the DOM?

Is this supported?

<iron-iconset-svg name="custom-icons" size="80">
  <svg>
    <style>
      .icon {
        fill: var(--paper-red-500);
     }
   </style>
  </svg>
</iron-iconset-svg>

It didn't work for me but it may be something with my setup.

It's a gotcha, but the HTML parser can halt at any time when parsing a custom-element subtree, so an element can upgrade before all of it's children have been parsed.

Therefore, iron-iconset-svg cannot reliably construct the icon map at _nameChanged time.

In the file iron-iconset-svg.html the comment that begins on line 18

/**
   * The `iron-iconset-svg` element allows users to define their own icon sets

is incorrectly closed, this prevents icons from loading when this component is used.

the comment should be closed around line 52

   * @element iron-iconset-svg
   * @demo demo/index.html
   * @implements {Polymer.Iconset}
   **/

Description

Polymer 2 migration is so frustrating! My custom icons were working in polymer 1 and now they are not working in polymer 2

          <paper-icon-item name="home">
            <iron-icon icon="appIcons:home" slot="item-icon"></iron-icon><a href="/home" link>Home</a>
          </paper-icon-item>

and

            <paper-icon-button icon="appIcons:menu" drawer-toggle></paper-icon-button>