How to get the device and hardware icons from iron icons list in polymer js?

Question

Thanks in advance. In google polymer 3, I used below link to get the icons
https://npm-demos.appspot.com/@polymer/[email protected]/demo/index.html I can use the images from icons list and unable to use another images from Av, Communication, devices etc. Can anybody please help me on this.

Answer 1

It would be best if you would show some code. To be precise the bit of code where you imported the icons and use them. I believe you might have imported not all icon -sets

However, the best way to use the icons provided by Polymer is to create a file which includes only the icons you actually going to use. This will reduces load time and makes the icons generally more accessible.

Example:
This Polymer3 Element is called custom-icons.js

import '@polymer/polymer/polymer-element.js';
import '@polymer/iron-icon/iron-icon.js';
import '@polymer/iron-iconset-svg/iron-iconset-svg.js';
const $_documentContainer = document.createElement('template');

$_documentContainer.innerHTML = `<iron-iconset-svg size="24" name="custom-icons">

 <svg>
    <defs>
        <g id="menu">
            <path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z"></path>
        </g>
        <g id="arrow-back">
            <path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"></path>
        </g>
    </defs>
 </svg>

</iron-iconset-svg>`;

document.head.appendChild($_documentContainer.content);

Answer 2

You will need to import explicitly other icon sets as:

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

here below are for the Av, Communication, devices icons:

import '@polymer/iron-icons/av-icons.js';
import '@polymer/iron-icons/communication-icons.js';
import '@polymer/iron-icons/device-icons.js';