Polimero - Icona di ferro

L'elemento <iron-icon> viene utilizzato per visualizzare una singola icona. La dimensione predefinita dell'icona è di 24 px quadrati.

È possibile visualizzare un'icona utilizzando src come mostrato di seguito:

<iron-icon src = "icon.png"></iron-icon>

Il codice seguente mostra come impostare la dimensione di un'icona.

<iron-icon class = "big" src = "big_icon.png"></iron-icon>
<style is = "custom-style">
   .big {
      --iron-icon-height: 20px;
      --iron-icon-width: 20px;
   }
</style>

Ci sono vari set di icone negli elementi in ferro. Per il set predefinito di icone, è necessario importare il file iron-icons.html nel file index e per definire un'icona utilizzare l'attributo icon come mostrato nel comando seguente.

<link rel = "import" href = "/components/iron-icons/iron-icons.html">

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

Puoi anche usare diversi set di icone incorporati importando il file iron-icons / <iconset> icons.html e definendo l'icona come <iconset>: <icon>.

Ad esempio, se desideri utilizzare un'icona di comunicazione, il codice sarà:

<link rel = "import" href = "/components/iron-icons/communication-icons.html">

<iron-icon icon = "communication:email"></iron-icon>

Puoi anche utilizzare un'icona creando set di icone personalizzati come mostrato di seguito:

<iron-icon icon = "fruit:berry"></iron-icon>

La tabella seguente mostra le proprietà personalizzate da utilizzare per lo styling:

Sr.No. Nome e descrizione della proprietà
1

--iron-icon

È un mixin applicato a un'icona. Il valore predefinito è {}
2

--iron-icon-width

Specifica la larghezza di un'icona. Il valore predefinito è 24 px.
3

--iron-icon-height

Specifica l'altezza di un'icona. Il valore predefinito è 24 px.
4

--iron-icon-fill-color

Proprietà per riempire il colore dell'icona SVG. Il valore predefinito è currentcolor.
5

--iron-icon-stroke-color

Proprietà per riempire il colore del tratto dell'icona SVG.

Esempio

Per utilizzare l'elemento iron-icon, vai alla cartella del tuo progetto nel prompt dei comandi e usa il seguente comando:

bower install PolymerElements/iron-icon --save

Il seguente esempio dimostra l'uso dell'elemento iron-icon -

<!DOCTYPE html>
<html>
   <head>
      <title>iron-icon</title>
      <base href = "https://user-content-dot-custom-elements.appspot.com/PolymerElements/iron-icon/v1.0.13/iron-icon/">
      <script src = "../webcomponentsjs/webcomponents-lite.js"></script>
      <link rel = "import" href = "../iron-icons/iron-icons.html">
      <link rel = "import" href = "iron-icon.html">
   </head>

   <body>
      <h2>Iron-Icon Example</h2>
      <iron-icon icon = "android"></iron-icon>
   </body>
</html>

Produzione

Per eseguire l'applicazione, vai alla directory del tuo progetto ed esegui il seguente comando:

polymer serve

Ora apri il browser e vai a http://127.0.0.1:8081/. Di seguito sarà l'output.