Web Components Icon Overview

    The Web Components Icon component allows you to easily display font or choose from a large set of predefined SVG icons, but it also gives you the ability to create custom font icons for your project. Benefiting from a number of attributes, you can define or change the size of the icon in use or apply different styles to it.

    Web Components Icon Example

    Usage

    Primeiro, você precisa instalar o Ignite UI for Web Components executando o seguinte comando:

    npm install igniteui-webcomponents
    
    import { defineComponents, IgcIconComponent } from "igniteui-webcomponents";
    
    defineComponents(IgcIconComponent);
    

    Para uma introdução completa ao Ignite UI for Web Components, leia o tópico Introdução.

    The IgcIconComponent doesn't contain any icons on its own. It's a conduit for displaying any registered SVG images.

    Adding Icons

    To register an image as an icon, all you have to do is import one of the 2 utility functions from the icons registry service that allows you to add icons to an icon collection.

    import {
      registerIcon,
      registerIconFromText,
    } from "igniteui-webcomponents";
    

    The registerIcon function allows you to register an SVG image as an icon from an external file:

    registerIcon(
      "search",
      "https://unpkg.com/material-design-icons@3.0.1/action/svg/production/ic_build_24px.svg",
      "material"
    );
    

    O método acima adicionará um ícone chamado search a uma coleção em cache chamada material.

    In order to use the newly registered icon, all you have to do is to pass the name and collection to the IgcIconComponent element:

    <igc-icon name="search" collection="material"></igc-icon>
    

    The second method for registering icons is by passing an SVG string to the registerIconFromText method:

    const searchIcon =
      '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>';
    
    registerIconFromText("search", searchIcon, "material");
    

    Então você o usaria da mesma maneira descrita no exemplo de componente acima.

    Tamanho

    O componente icon suporta três tamanhos de ícone -small, medium (padrão) e large. Para alterar o tamanho do ícone, você pode utilizar a variável CSS--ig-size da seguinte forma:

    igc-icon {
      --ig-size: var(--ig-size-large);
    }
    

    Mirrored

    Alguns ícones precisam parecer um pouco diferentes quando usados no modo Right-to-Left (RTL). Por esse motivo, fornecemos um atributo mirrored que, quando definido, inverte o ícone horizontalmente.

    <igc-icon name="search" mirrored></igc-icon>
    

    Styling

    The icon component can be styled by applying styles directly to the IgcIconComponent element;

    igc-icon {
      --size: 28px;
      color: var(--ig-primary-500);
    }
    

    API References

    Additional Resources