How do I use the symbol tag in place of the g tag in iron-iconset-svg?

Navigation
3

I'm trying to set an iron-iconset-svg using using the icons with the symbol tag instead of using the g tag and the icon is not rendered. In all documentation and references on the internet the SVG is used with the tag g. There is

Here's some code snippet: 

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

The following is the component call: 

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

Does anyone have any idea how I can do this?

    
asked by anonymous 29.07.2015 / 20:01

2 answers

0

Using the <symbol> tag requires reusing the icon using the <use> tag. This way, in the current version of the polymer iron-iconset-svg works only with the use of the <g> tag.

    
01.08.2015 / 19:10
0

Dude I think it would be a little simpler: 

    <!-- Seu componente aqui -->
    <svg style="display:none" id="my-icons">

    <!-- Elementos de seu componente --> 
      <symbol id="icon-1"><path d="coord..."> </symbol>
      <symbol id="icon-2"><path d="coord..."> </symbol>
      <symbol id="icon-3"><path d="coord..."> </symbol>

    </svg>

<!-- chamando seu componente -->
   <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="x y w h">

<!-- passando o ID -->
     <use xlink:href="#icon-1"></use> 
    </svg>
    
29.07.2015 / 21:09
Android Restriction - 3g Define custom parameters SoapClient PHP