Material Design Icons

Used by default.

<Icon name="mdi-dialpad" />


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


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


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

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" />