Polímero - Ícone de Ferro

O elemento <iron-icon> é usado para exibir um único ícone. O tamanho padrão do ícone é um quadrado de 24 pixels.

Um ícone pode ser exibido usando src conforme mostrado abaixo -

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

O código a seguir mostra como definir o tamanho de um ícone.

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

Existem vários conjuntos de ícones nos elementos de ferro. Para o conjunto padrão de ícones, você precisa importar o arquivo iron-icons.html em seu arquivo de índice e para definir um ícone use o atributo icon conforme mostrado no comando a seguir.

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

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

Você também pode usar diferentes conjuntos de ícones integrados importando o arquivo iron-icons / <iconset> icons.html e definir o ícone como <iconset>: <icon>.

Por exemplo, se você quiser usar um ícone de comunicação, o código será -

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

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

Você também pode usar um ícone criando conjuntos de ícones personalizados como mostrado abaixo -

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

A tabela a seguir mostra as propriedades personalizadas a serem usadas para estilização -

Sr. Não.	Nome e descrição da propriedade
1	--iron-icon É um mixin aplicado a um ícone. O valor padrão é {}
2	--iron-icon-width Ele especifica a largura de um ícone. O valor padrão é 24px.
3	--iron-icon-height Ele especifica a altura de um ícone. O valor padrão é 24px.
4	--iron-icon-fill-color Propriedade para preencher a cor do ícone SVG. O valor padrão é currentcolor.
5	--iron-icon-stroke-color Propriedade para preencher a cor do traço do ícone SVG.

Exemplo

Para usar o elemento iron-icon, navegue até a pasta do projeto no prompt de comando e use o seguinte comando -

bower install PolymerElements/iron-icon --save

O exemplo a seguir demonstra o uso do 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>

Resultado

Para executar o aplicativo, navegue até o diretório do projeto e execute o seguinte comando -

polymer serve

Agora abra o navegador e navegue até http://127.0.0.1:8081/. A seguir será a saída.

polímero_elementos.htm

↰ Previous page