Use the Icon Component to provide subtle graphical information to the user that, in some cases, may also trigger simple interactions such as liking a product, saving an article for later, etc. You may choose between the already provided Material Icons or add the ones you need to the 🎨 Material Icons page in the Indigo.Design System. The Icon is visually identical to the Ignite UI for Angular Icon Component

    Icon Demo


    The Icon comes in four different sizes:

    • ExtraLarge
    • Large
    • Medium
    • Small


    The Icon comes with styling flexibility through the options for selectable graphic and the color applied to it.


    Carefully pick the Icon color to assure good contrast with the background and definitely avoid similar shades of the same color or combinations that create chromatic aberrations.

    Do Don't

    Additional Resources

    Related topics:

    Our community is active and always welcoming to new ideas.