\n
Icons
\n
PrimeReact components internally use PrimeIcons library, the official icons suite from PrimeTek.
\n\n
Download
\n
PrimeIcons is available at npm, run the following command to download it to your project.
\n
\n{`\nnpm install primeicons --save\n`}\n\n\n
Getting Started
\n
PrimeIcons use the pi pi-{icon} syntax such as pi pi-check.\n A standalone icon can be displayed using an element like i or span
\n\n
\n{`\n\n\n`}\n\n\n
Size
\n
Size of the icons can easily be changed using font-size property.
\n\n
\n{`\n\n`}\n\n\n
\n\n
\n{`\n\n`}\n\n\n
\n\n
Spinning Animation
\n
Special pi-spin class applies continuous rotation to an icon.
\n
\n{`\n\n`}\n\n\n
\n\n
Constants
\n
PrimeIcons constants API is provided to easily choose an icon with typescript e.g. when defining a menu model.
\n
\n{`\n\n`}\n\n
\n{`\nimport {PrimeIcons} from 'primereact/api';\n\nconst items = [\n {\n label: 'Update',\n icon: PrimeIcons.REFRESH,\n to: '/update'\n },\n {\n label: 'Delete',\n icon: PrimeIcons.TIMES,\n to: '/delete'\n }\n]\n`}\n\n
List of Icons
\n
Here is the current list of PrimeIcons, more icons are added periodically. You may also request new icons at the issue tracker.
\n\n
\n \n
\n
\n {\n filteredIcons && filteredIcons.map(iconMeta => {\n const { icon, properties } = iconMeta;\n\n return icon.tags.indexOf('deprecate') === -1 && (\n
\n
\n
pi-{properties.name}
\n
\n );\n })\n }\n
\n