Icon Specification

igx-icon component should allow using of various icon/font families.

Objectives

It is providing a way to add material-icons in the markup.

User Stories

Developer

As a developer I want to be able to provide a way to show variety of material icon families.

<igx-icon family="material" name="home" 
    active="false">
</igx-icon>

End user

Icon should represents certain image/state.

Acceptance criteria

1. Be able to change family.
2. Be able to change name of the icon. Name represents icon value (example: name="home" will show house icon).
3. Be able to change icon state active/inactive.

Functionality

End User Experience

As an end user, I want to be given a visual representation of material icon families.

Developer Experience

As a developer I can programatically get/set all of the icon properties.

User Interface

The end user interface consists of:

1. Image-like icon value.

2. Two states of availability.

API

Properties

• family - set the family to family="material" to select the material icons set (default).
• name - set the icon by providing its name from the official material icons set name="home".
• active - set the icon to active/inactive by providing setting active="true" to true or false (default is true).

Methods

• getFamily() - returns the icon font family.
• getName() - returns the icon name.
• getActive() - returns the icon active state.
• getSvg() - returns the underlying SVG image as SafeHtml.
• template() - returns a TemplateRef to explicit, svg or no ligature.