ポリマーアイコンのサブセットをインポートする方法

Question

私は各カテゴリのポリマーのアイアンアイコンのカップルを使用していますが、セット全体をインポートしないことをお勧めします。必要なものだけをインポートする可能性がありますか（または加硫のためのツール/プラグイン）ですか？より小さなHTMLファイルを提供できますか？

Answer 1

Polymer Iconset Generatorツールを使用して、デフォルトの鉄アイコンの独自のカスタムサブセットを作成できます。それは本当に便利で、あなたが必要とするもののように聞こえます。

Answer 2

また、GoogleのマテリアルデザインのWebサイトから、独立性ポリマーの、あなたのする形式で、直接およびそれらを個別にダウンロードすることができます。

https://material.io/icons/

新しい追加アイコンを取得します。この方法では、あまりにも。

Answer 3

必要なファイルのみをインポートするには、iron-icons.htmlと同じベースのcustom-icons.htmlファイルを作成します。

<iron-iconset-svg></iron-iconset-svg>ノードから 'name'属性を変更して、使用するカスタム名と一致させるだけで済みます。私は 'カスタムアイコン'を使用します。この名前を使用して後にアイコンを挿入します。

あなたのファイル意志は次のようになります。あなただけのセット鉄のアイコンから、または設定された他のアイコンからコピーする必要が<defs>...</defs>ノード内

<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html"> 
    <link rel="import" href="../bower_components/iron-icon/iron-icon.html"> 
    <iron-iconset-svg name="custom-icons" size="24"> 
     <svg> 
      <defs> 
       . 
       . 
       . 
      </defs> 
     </svg> 
    </iron-iconset-svg> 

（デバイス、編集者、通知...） <g>ノードを使用し、それをcustom-icons.htmlファイル内に挿入します。

たとえば、iron-icons.htmlファイルのメニューアイコンが必要です。 ただ、この要素をコピー：

<g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g> 

を、カスタムファイル内<defs>...</defs>ノード内に貼り付けます。ちょうどこのファイルの代わりに、鉄のアイコンをインポートして、このようなアイコンを使用するアプリケーションに今

<link rel="import" href="../bower_components/iron-iconset-svg/iron-iconset-svg.html"> 
<link rel="import" href="../bower_components/iron-icon/iron-icon.html"> 
<iron-iconset-svg name="custom-icons" size="24"> 
    <svg> 
     <defs> 
      <g id="menu"><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"/></g> 
     </defs> 
    </svg> 
</iron-iconset-svg> 

：あなたは「ID」属性の値を変更した場合

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

あなたはこれを持っています <g></g>ノード（例えばMENU2）に、このようにそれを使用する：

<iron-icon icon="custom-icons:menu2"></iron-icon> 

詳細は、ロブ・ドッドソンのPolycastのを見に行くために：Custom icons with Iron Iconsets