Angular Material Input with Icon

By Arvind Rai, April 25, 2024

In this article, we will learn to create input element with icons in our Angular Material application. We can add icon as prefix or suffix to an input element.

1. <mat-form-field>

To create input with icon, we need to wrap them within <mat-form-field> whose role is to wrap several Angular material components and apply common styles. It also manages which component should be first or last.
To create input with icon button, we need to warp <input matInput> and <button mat-icon-button> within <mat-form-field>.

<mat-form-field>
  <button mat-icon-button>
    <mat-icon> ---- </mat-icon>
  </button>
  <input matInput>
</mat-form-field>

mat-icon-button attribute creates a button with icon.
<mat-icon> element creates an icon.
matInput attribute creates material <input> element.

2. matPrefix and matSuffix

Angular Material provides matPrefix and matSuffix attributes that we can use to order elements within <mat-form-field>. To keep icon as prefix, use matPrefix and to keep icon as suffix, use matSuffix attributes with icon button.
Using matPrefix :

<mat-form-field>
  <mat-label>Enter Number</mat-label>
  <button mat-icon-button matPrefix>
    <mat-icon>add_circle</mat-icon>
  </button>
  <input matInput>
</mat-form-field>

Icon will display as prefix to input element.
Using matSuffix

<mat-form-field>
  <mat-label>Name</mat-label>
  <button mat-icon-button matSuffix>
    <mat-icon>add_link</mat-icon>
  </button>
  <input matInput>
</mat-form-field>

Icon will display as suffix to input element.

3. matTextPrefix and matTextSuffix

To add text as prefix and suffix instead of icon with input element, we should use matTextPrefix and matTextSuffix attributes.
matTextPrefix adds a text as prefix and matTextSuffix adds a text as suffix within <mat-form-field>.
Find the code snippet.

<mat-form-field>
  <mat-label>Price</mat-label>
  <input matInput>
  <span matTextPrefix>₹  </span>
  <span matTextSuffix>Only</span>
</mat-form-field>

4. Label with Icon

To add icon within label, use <mat-icon> within <mat-label>.

<mat-form-field>
  <mat-label>Add link
    <mat-icon>add_link</mat-icon>
  </mat-label>
  <input matInput>
</mat-form-field>

5. Example

user.component.html

<h3>Icon as Suffix</h3>

<mat-form-field>
  <mat-label>Enter Number</mat-label>
  <button mat-icon-button matSuffix>
    <mat-icon>add_circle</mat-icon>
  </button>
  <input matInput>
</mat-form-field>
<br />
<mat-form-field>
  <mat-label>Set alarm</mat-label>
  <button mat-icon-button matSuffix>
    <mat-icon>access_alarms</mat-icon>
  </button>
  <input matInput>
</mat-form-field>

<h3>Icon as Prefix</h3>

<mat-form-field>
  <mat-label>Enter Number</mat-label>
  <button mat-icon-button matPrefix>
    <mat-icon>add_circle</mat-icon>
  </button>
  <input matInput>
</mat-form-field>
<br />
<mat-form-field>
  <mat-label>Set alarm</mat-label>
  <button mat-icon-button matPrefix>
    <mat-icon>access_alarms</mat-icon>
  </button>
  <input matInput>
</mat-form-field>

<h3>Using Icon as Prefix and Suffix</h3>
<mat-form-field>
  <mat-label>Destination</mat-label>
  <button mat-icon-button matPrefix>
    <mat-icon>airplanemode_on</mat-icon>
  </button>
  <button mat-icon-button matSuffix>
    <mat-icon>airport_shuttle</mat-icon>
  </button>
  <input matInput>
</mat-form-field>
<h3>Using Text as Prefix and Suffix</h3>

<mat-form-field>
  <mat-label>Price</mat-label>
  <input matInput>
  <span matTextPrefix>$  </span>
  <span matTextSuffix>Only</span>
</mat-form-field>

<h3>Icon with label</h3>

<mat-form-field>
  <mat-label>Add link
    <mat-icon>add_link</mat-icon>
  </mat-label>
  <input matInput>
</mat-form-field>

user.component.ts

import { Component } from '@angular/core';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { MatIconModule } from '@angular/material/icon';
import { MatButtonModule } from '@angular/material/button';

@Component({
    selector: 'app-user',
    standalone: true,
    imports: [MatFormFieldModule, MatInputModule, MatButtonModule, MatIconModule],
    templateUrl: './user.component.html'
})
export class UserComponent {
}

Find the print-screen of the output.

Reference

Angular Material form-field

POSTED BY

ARVIND RAI

LEARN MORE

JAVA SPRING BOOT ANGULAR Angular Material NGRX JAVASCRIPT ANDROID THYMELEAF FREEMARKER Hibernate Struts 2 Testing MAVEN APACHE API JACKSON API JUNIT 5