Icon Specification

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

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 sets.

<igx-icon fontSet="material" name="home" 
    color="blue" isActive="false">
</igx-icon>

End user

Icon should represents certain image/state.

Acceptance criteria

1. Be able to change font set.
2. Be able to change name and color 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 sets.

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

text

• Properties

• fontSet - set the fontSet to fontSet="material" to select the material icons set (default).

• name - set the icon by providing its name from the official material icons set name="home".

• color - set the icon color by providing a string value with the color color="#474747".

• isActive - set the icon to active/inactive by providing setting isActive="true" to true or false (default is true).

• Methods

• fontSet(fontFamily: string) - sets the icon font family.

• color(color: string) - sets the icon color.

• name(icon: string) - sets the icon name.

• isActive(state: boolean) - sets the icon style to inactive if set the false.

• getFontSet() - returns the icon font family.

• getIconColor() - returns the icon color.

• getIconName() - returns the icon name.

• getActive() - returns the icon active state.