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

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

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

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

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