Angular Material : mat-icon with mat-select

By Arvind Rai, May 14, 2024
We can use <mat-icon> within <mat-select> to display icon with items. Icons can also be displayed at trigger label.

<mat-icon> within <mat-option>

To display icon with items, use <mat-icon> within <mat-option>.
<mat-form-field>
  <mat-select>
     <mat-option> <mat-icon> ------ </mat-icon> </mat-option>  
  </mat-select>
</mat-form-field> 

<mat-icon> within <mat-select-trigger>

To display icon with trigger label, use <mat-icon> within <mat-select-trigger>.
<mat-form-field>
  <mat-select-trigger>
     <mat-icon> ------ </mat-icon>
  </mat-select-trigger>
  <mat-select>
     <mat-option> <mat-icon> ------ </mat-icon> </mat-option>  
  </mat-select>
</mat-form-field> 

Example

Here I will create an application for Angular Material select using reactive form. I will create two select box, one for single selection and second for multiple selection. In single selection I will use icons for dropdown items. In multiple selection I will use icons for dropdown items as well as for trigger label.
item.component.html
<h3>mat-icon with mat-option</h3>
<mat-form-field>
  <mat-label>Select Gadget</mat-label>
  <mat-select [formControl]="gadget">
    @for (gad of allGadgets; track gad) {
    <mat-option [value]="gad.name"> <mat-icon>{{gad.icon}}</mat-icon> {{gad.name}}</mat-option>
    }
  </mat-select>
</mat-form-field>

<h3>mat-icon with mat-option and mat-select-trigger</h3>
<form [formGroup]="gadgetForm" (ngSubmit)="onFormSubmit()">
  <mat-form-field>
    <mat-label>Select Gadgets</mat-label>
    <mat-select formControlName="selectedGadget" multiple (selectionChange)="onItemSelection()">
      <mat-select-trigger>
        <mat-icon>{{selectedItemIcon}}</mat-icon>
        @if ((selectedGadgetAsArray?.length || 0) > 1) {
        (+{{(selectedGadgetAsArray?.length || 0) - 1}} {{' more'}})
        }
      </mat-select-trigger>
      @for (gad of allGadgets; track gad) {
      <mat-option [value]="gad.name"> <mat-icon>{{gad.icon}}</mat-icon> {{gad.name}}</mat-option>
      }
    </mat-select>
  </mat-form-field>
</form>

{{selectedGadget?.value}} 
b>item.component.ts
import { Component } from '@angular/core';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormBuilder, FormControl, ReactiveFormsModule } from '@angular/forms';
import { MatSelectModule } from '@angular/material/select';
import { MatIconModule } from '@angular/material/icon';

@Component({
  selector: 'app-item',
  standalone: true,
  imports: [MatFormFieldModule, MatSelectModule, ReactiveFormsModule, MatIconModule],
  templateUrl: 'item.component.html'
})
export class FileUploadComponent {
  gadget = new FormControl('');
  allGadgets = [
    { name: 'Mobile', icon: 'phone_android' },
    { name: 'Laptop', icon: 'laptop' },
    { name: 'Desktop', icon: 'desktop_mac' },
    { name: 'Headphone', icon: 'headphones' },
    { name: 'Camera', icon: 'camera_alt' }
  ];
  constructor(private formBuilder: FormBuilder) {
  }
  gadgetForm = this.formBuilder.group({
    selectedGadget: ''
  });
  get selectedGadget() {
    return this.gadgetForm.get('selectedGadget');
  }
  get selectedGadgetAsArray() {
    return this.gadgetForm.get('selectedGadget')?.value?.toString().split(',');
  }
  selectedItemIcon = '';
  onItemSelection() {
    this.selectedItemIcon = this.allGadgets.find(g => g.name === this.selectedGadgetAsArray?.[0])?.icon ?? '';
    console.log(this.selectedItemIcon);
  }
  onFormSubmit() {
    console.log(this.selectedGadget?.value);
  }
} 
Angular Material : mat-icon with mat-select

Reference

POSTED BY
ARVIND RAI
ARVIND RAI
LEARN MORE












©2024 concretepage.com | Privacy Policy | Contact Us