Angular Primeng IconField Component

PrimeNG is a popular UI component library for Angular, and it includes a range of customizable components to enhance user experience. One such component is the IconField. It helps in creating input fields with icons like search, loading spinners, or custom SVGs, offering flexibility in how forms and interactive fields are designed.

In this article, we’ll explore how to implement and use the IconField component from PrimeNG.

What is the IconField Component?

The IconField component in PrimeNG is a wrapper that allows you to combine an input field with an icon. This component enhances user interaction by adding visual icons, such as search icons, loading spinners, or other custom icons, within the input field. It is especially useful for search bars, password inputs (with "show/hide" eye icons), and any field that could benefit from a graphic hint.

Angular PrimeNG Form MeterGroup Properties:

• p-icon-field: Container of element.
• p-icon-field-right: When there is an icon on the right side of the input field, this attribute is applied.
• p-icon-field-left: When there is an icon on the left side of the input field, this attribute is applied.
• p-input-icon: For input fields with icons on the left, right, or both, this is the basic container attribute.

Syntax:

<p-iconField iconPosition="">
    <p-inputIcon styleClass="" />
    <input type="text"  />
</p-iconField>

IconField, InputIcon, and InputText are components in PrimeNG that manage different user interface elements associated with input fields and icons.

IconFieldModule

The purpose of the IconFieldModule is to manage fields in which data is represented or interacted with using icons. It offers a simple method for incorporating icons into form fields and other input elements.

Features: Enables icons to be added to text fields and other interactive components to offer more functionality or context.

InputIconModule

The primary function of the InputIconModule is to integrate icons with input fields. This module lets you insert icons within of input fields; these symbols are typically used to give a visual cue as to what kind of input is requested (for example, a search icon inside of a search box).

Features: Allows for the integration of icons into input components and can be customized to blend in with the application's general look.

InputTextModule

The purpose of the InputIconModule is to construct basic text input fields using the InputTextModule. It offers a uniform method for adding text input elements to forms and other application components.

Features: Manages text input, including formatting, validation, and placeholders, among other configurations.

Steps To Implement IconField Component

Step 1: Install Angular CLI

If you haven’t installed Angular CLI yet, install it using the following command

npm install -g @angular/cli

Step 2: Create an Angular application using the following command.

ng new style
cd style

Folder Structure

Dependencies

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

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Example: Below mentioned is code example of app component having a HTML file and ts file to display IconField.

<!-- src/app/app.component.html -->
<div class="card flex flex-wrap  justify-content-center gap-3">
    <p-iconField iconPosition="left">
        <p-inputIcon styleClass="pi pi-mobile" />
        <input type="text" pInputText placeholder="Enter no." />
    </p-iconField>
    <p-iconField iconPosition="right">
        <p-inputIcon styleClass="pi pi-spin pi-spinner-dotted  " />
        <input type="text" pInputText />
    </p-iconField>
</div>

// src/app/app.component.ts
import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { InputIconModule } from 'primeng/inputicon';
import { IconFieldModule } from 'primeng/iconfield';
import { InputTextModule } from 'primeng/inputtext';
import { FormsModule } from '@angular/forms';
@Component({
    selector: 'app-root',
    standalone: true,
    imports: [RouterOutlet, InputIconModule, IconFieldModule, InputTextModule, FormsModule],
    templateUrl: './app.component.html',
    styleUrl: './app.component.css'
})
export class AppComponent {
    title = 'style';

}

To start the application run the following command.

ng serve --open

Output