Polímero - Icono de hierro

El elemento <iron-icon> se utiliza para mostrar un solo icono. El tamaño predeterminado del icono es cuadrado de 24 píxeles.

Se puede mostrar un icono usando src como se muestra a continuación:

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

El siguiente código muestra cómo establecer el tamaño de un icono.

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

Hay varios conjuntos de iconos en los elementos de hierro. Para el conjunto predeterminado de iconos, debe importar el archivo iron-icons.html en su archivo de índice y para definir un icono use el atributo de icono como se muestra en el siguiente comando.

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

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

También puede utilizar diferentes conjuntos de iconos integrados importando el archivo iron-icons / <iconset> icons.html y definiendo el icono como <iconset>: <icon>.

Por ejemplo, si desea utilizar un icono de comunicación, el código será:

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

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

También puede utilizar un icono creando conjuntos de iconos personalizados como se muestra a continuación:

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

La siguiente tabla muestra las propiedades personalizadas que se utilizarán para diseñar:

No Señor.	Nombre y descripción de la propiedad
1	--iron-icon Es un mixin que se aplica a un icono. El valor predeterminado es {}
2	--iron-icon-width Especifica el ancho de un icono. El valor predeterminado es 24px.
3	--iron-icon-height Especifica la altura de un icono. El valor predeterminado es 24px.
4	--iron-icon-fill-color Propiedad para rellenar el color del icono SVG. El valor predeterminado es el color actual.
5	--iron-icon-stroke-color Propiedad para rellenar el color del trazo del icono SVG.

Ejemplo

Para usar el elemento de icono de hierro, navegue a la carpeta de su proyecto en el símbolo del sistema y use el siguiente comando:

bower install PolymerElements/iron-icon --save

El siguiente ejemplo demuestra el uso del 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>

Salida

Para ejecutar la aplicación, navegue hasta el directorio de su proyecto y ejecute el siguiente comando:

polymer serve

Ahora abra el navegador y navegue hasta http://127.0.0.1:8081/. Lo siguiente será la salida.

↰ Previous page