Icons

Material Design Icons

Used by default. 

<Icon name="mdi-dialpad" />

Disabled

<Icon name="mdi-dialpad" color="error" disabled="true" />

Clickable

Clicked 0 times 
<Icon name="mdi-checkbox-marked-circle" color="error" (click)="onClick($event)" type="button" />

Sizes

<Icon name="mdi-dialpad" size="xsmall" />
<Icon name="mdi-dialpad" color="primary" size="small" />
<Icon name="mdi-dialpad" color="warning" />
<Icon name="mdi-dialpad" color="primary" size="large" />
<Icon name="mdi-dialpad" color="error" size="xlarge" />

With buttons

<Btn (click)="onClick($event)" color="primary">Accept
    <Icon name="mdi-checkbox-marked-circle" position="right" />
</Btn>
<Btn (click)="onClick($event)" color="error">Decline
    <Icon name="mdi-cancel" position="right" />
</Btn>
<Btn (click)="onClick($event)">
    <Icon name="mdi-minus-circle" position="left" />Cancel
</Btn>
<Btn (click)="onClick($event)" color="warning">
    <Icon name="mdi-arrow-left" position="left" />Back
</Btn>
<Btn (click)="onClick($event)" color="info">
    <Icon name="mdi-wrench" />
</Btn>
<Btn (click)="onClick($event)" color="tertiary">
    <Icon name="mdi-cloud-upload" />
</Btn>
<div class="pa-4">
    <Btn (click)="onClick($event)" color="secondary" pill="true">
        <Icon name="mdi-thumb-up" />
    </Btn>
    <Btn (click)="onClick($event)" color="error" pill="true">
        <Icon name="mdi-thumb-down" />
    </Btn>
</div>

Font Awesome 4 or 5

To use Font Awesome 4 or 5 you need to configure it first in ViewiUI icons prop.

By default, the value is set to use 'mdi' icons. 

<ViewiUI icons="{['mdi', 'fa5']}" />
<Icon name="fas fa-lock" size="large" color="success" />
<Icon name="fas fa-search" size="large" color="primary" />
<Icon name="fas fa-list" size="large" color="tertiary" />
<Icon name="fas fa-edit" size="large" color="accent" />
<Icon name="fas fa-tachometer-alt" size="large" color="error" />
<Icon name="fas fa-circle-notch fa-spin" size="large" color="warning" />