How To Use PrimeNG Icon In Angular 17?

PrimeNG is a popular UI component library for Angular applications that provides a wide range of pre-built components, including icons. With Angular 17, PrimeNG icons can be easily integrated into your project. In this article, we'll walk you through how to set up and use PrimeNG icons in your Angular 17 application.

Prerequisites

• HTML
• CSS
• Angular CLI

Approach

• We are using Angular 17 to demonstrate the use of Primeicon.
• After the initial setup of the Angular Application, we will be installing and importing primeicons.
• We will add the relevant imports in styles.css file in order to access primeicons in the entire application.
• After the setup, we can use primeicons with the help of <i> tag followed by the classes for each icon.

Steps To Use PrimeNG Icon In Angular 17

Step 1: Create the Angular Project

 ng new Prime-Icon

Folder Structure

Step 2: Use the following command to install the necessary packages in your project.

npm install primeicons

Dependencies

"dependencies": {
    "@angular/animations": "^17.2.0",
    "@angular/common": "^17.2.0",
    "@angular/compiler": "^17.2.0",
    "@angular/core": "^17.2.0",
    "@angular/forms": "^17.2.0",
    "@angular/platform-browser": "^17.2.0",
    "@angular/platform-browser-dynamic": "^17.2.0",
    "@angular/platform-server": "^17.2.0",
    "@angular/router": "^17.2.0",
    "@angular/ssr": "^17.2.0",
    "express": "^4.18.2",
    "primeicons": "^7.0.0",
    "primeng": "^17.16.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.14.3"
}

Step 3: styles.css in import primeicons

@import "primeicons/primeicons.css";

Example 1: Simple Use PrimeIcon

app.component.html:

The below mentioned code displays <i> tag having 4 classes as 4 icons of primeicons i.e, check , times, search, user.

<!--app.component.html-->

<i class="pi pi-check"></i><br>
<i class="pi pi-times"></i><br>
<span class="pi pi-search"></span><br>
<span class="pi pi-user"></span>

Output

Example 2: Change Icon Color

app.component.html:

The below mentioned code displays <i> tag having 4 classes as 4 icons of primeicons i.e, check , times, search, user having differentiated colors as blue, yellow, green and orange.

<i class="pi pi-check" style="color: blue;"></i><br>
<i class="pi pi-times" style="color: yellow;"></i><br>
<span class="pi pi-search" style="color: green;"></span><br>
<span class="pi pi-user" style="color: orange;"></span>

Output

Example 3: Spin Icon In Primeicon

app.component.html

The below mentioned code displays <i> tag having 2 classes as 2 icons of primeicons i.e, spinner and cog which moves in a circular position like loading icon.

<i class="pi pi-spin pi-spinner" style="font-size: 2rem;color:yellow; " ></i><br>
<i class="pi pi-spin pi-cog" style="font-size: 2rem; color: orange;"></i>

Output