Polymère - Icône de fer

L'élément <iron-icon> est utilisé pour afficher une seule icône. La taille de l'icône par défaut est de 24 pixels carrés.

Une icône peut être affichée en utilisant src comme indiqué ci-dessous -

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

Le code suivant montre comment définir la taille d'une icône.

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

Il existe différents ensembles d'icônes dans les éléments en fer. Pour l'ensemble d'icônes par défaut, vous devez importer le fichier iron-icons.html dans votre fichier d'index et pour définir une icône, utilisez l'attribut icon comme indiqué dans la commande suivante.

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

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

Vous pouvez également utiliser différents ensembles intégrés d'icônes en important le fichier iron-icons / <iconset> icons.html et définir l'icône comme <iconset>: <icon>.

Par exemple, vous souhaitez utiliser une icône de communication, le code sera -

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

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

Vous pouvez également utiliser une icône en créant des jeux d'icônes personnalisés comme indiqué ci-dessous -

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

Le tableau suivant montre les propriétés personnalisées à utiliser pour le style -

N ° Sr. Nom et description de la propriété
1

--iron-icon

C'est un mixin appliqué à une icône. La valeur par défaut est {}
2

--iron-icon-width

Il spécifie la largeur d'une icône. La valeur par défaut est 24px.
3

--iron-icon-height

Il spécifie la hauteur d'une icône. La valeur par défaut est 24px.
4

--iron-icon-fill-color

Propriété pour remplir la couleur de l'icône SVG. La valeur par défaut est la couleur actuelle.
5

--iron-icon-stroke-color

Propriété pour remplir la couleur de trait de l'icône SVG.

Exemple

Pour utiliser l'élément iron-icon, accédez au dossier de votre projet dans l'invite de commande et utilisez la commande suivante -

bower install PolymerElements/iron-icon --save

L'exemple suivant montre l'utilisation de l'élément 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>

Production

Pour exécuter l'application, accédez au répertoire de votre projet et exécutez la commande suivante -

polymer serve

Ouvrez maintenant le navigateur et accédez à http://127.0.0.1:8081/. Voici la sortie.