icon-item
<table class="dev-icon-item-table">
    <thead>
        <tr>
            <td>theme</td>
            <td>fade</td>
            <td>contrast</td>
            <td>fade</td>
            <td>error</td>
            <td>fade</td>
            <td>warning</td>
            <td>fade</td>
            <td>success</td>
            <td>fade</td>
            <td>empty</td>
        </tr>
    </thead>
    <tr>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Theme"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Theme" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Contrast"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Contrast" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Error"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Error" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Warning"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Warning" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Success"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Success" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [color]="colors.Empty"></i>
        </td>
    </tr>
    <tr>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Theme"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Theme" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Contrast"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Contrast" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Error"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Error" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Warning"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Warning" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Success"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Success" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [color]="colors.Empty"></i>
        </td>
    </tr>
    <tr>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Theme"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Theme" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Contrast"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Contrast" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Error"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Error" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Warning"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Warning" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Success"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Success" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [color]="colors.Empty"></i>
        </td>
    </tr>
    <tr>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Theme"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Theme" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Contrast"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Contrast" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Error"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Error" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Warning"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Warning" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Success"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Success" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [color]="colors.Empty"></i>
        </td>
    </tr>
</table>

<br />
<br />
<br />

icon-item_big
<table class="dev-icon-item-big-table">
    <thead>
        <tr>
            <td>theme</td>
            <td>fade</td>
            <td>contrast</td>
            <td>fade</td>
            <td>error</td>
            <td>fade</td>
            <td>warning</td>
            <td>fade</td>
            <td>success</td>
            <td>fade</td>
            <td>empty</td>
        </tr>
    </thead>
    <tr>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Theme"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Theme" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Contrast"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Contrast" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Error"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Error" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Warning"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Warning" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Success"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Success" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-chevron-down-s_16" [big]="true" [color]="colors.Empty"></i>
        </td>
    </tr>
    <tr>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Theme"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Theme" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Contrast"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Contrast" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Error"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Error" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Warning"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Warning" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Success"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Success" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-calendar-o_16" [big]="true" [color]="colors.Empty"></i>
        </td>
    </tr>
    <tr>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Theme"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Theme" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Contrast"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Contrast" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Error"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Error" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Warning"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Warning" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Success"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Success" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-clock_16" [big]="true" [color]="colors.Empty"></i>
        </td>
    </tr>
    <tr>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Theme"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Theme" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Contrast"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Contrast" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Error"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Error" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Warning"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Warning" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Success"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Success" [fade]="true"></i>
        </td>
        <td>
            <i kbq-icon-item="kbq-folder-open_16" [big]="true" [color]="colors.Empty"></i>
        </td>
    </tr>
</table>