Icons

Volt components can be used with any icon library using the templating features.

PrimeIcons #

PrimeIcons is the default icon library of PrimeVue with over 250 open source icons developed by PrimeTek. Volt uses the PrimeIcons as Vue components instead of the font icons format to avoid importing the entire icon suite assets including the font files and styles. For example ChevronDown component is used instead of pi pi-chevron-down.

An icon is customized with templating, example below changes the dropdown icon of a Select in @/volt/select/index.vue.


<template #dropdownicon>
    <ArrowDownIcon class="text-primary"/>
</template>


import ArrowDownIcon from '@primevue/icons/arrowdown';

Material #

Material icons is the official icon library based on Google Material Design.


<template #dropdownicon>
    <span class="material-icons">arrow_drop_down</span>
</template>

FontAwesome #

Font Awesome is a popular icon library with a wide range of icons.


<template #dropdownicon>
    <i class="fa-light fa-chevron-down"></i>
</template>

SVG #

Inline SVGs embedded within the component.


<template #dropdownicon>
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
        <g id="chevron-down">
            <path d="M12,15.25a.74.74,0,0,1-.53-.22l-5-5A.75.75,0,0,1,7.53,9L12,13.44,16.47,9A.75.75,0,0,1,17.53,10l-5,5A.74.74,0,0,1,12,15.25Z"/>
        </g>
    </svg>
</template>

Image #

Any type of image can be used as an icon.


<template #dropdownicon>
    <template #dropdownicon>
        <img alt="dropdown icon" src="/assets/icons/arrow_down.png">
    </template>
</template>