PrimeVue components internally use PrimeIcons library, the official icons suite from PrimeTek.
PrimeIcons is available at npm, run the following command to download it to your project.
npm install primeicons --save
Then import the library.
import 'primeicons/primeicons.css';
PrimeIcons use the pi pi-{icon} syntax such as pi pi-check. A standalone icon can be displayed using an element like i or span
<i class="pi pi-check"></i>
<i class="pi pi-times"></i>
Size of the icons can easily be changed using font-size property.
<i class="pi pi-check"></i>
<i class="pi pi-check" style="font-size: 2rem"></i>
Special pi-spin class applies continuous rotation to an icon.
<i class="pi pi-spin pi-spinner" style="font-size: 2rem"></i>
PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.
<Menu :model="items" />
import {PrimeIcons} from 'primevue/api';
export default {
data() {
return {
items: [
{
label: 'Update',
icon: PrimeIcons.REFRESH,
to: '/update'
},
{
label: 'Delete',
icon: PrimeIcons.TIMES,
to: '/delete'
}
]
}
}
}
Here is the current list of PrimeIcons, more icons are added periodically. You may also request new icons at the issue tracker.