Skip to main content

angular material - Button toggle group icon only

app.component.html 

<h2>Angular Material - Button toggle group icon only</h2>


<div style="padding: 25px;">
  <mat-button-toggle-group #toggleGroup="matButtonToggleGroup">
    <mat-button-toggle value="verify" aria-label="Verify the item">
      <mat-icon>check_circle</mat-icon>
    </mat-button-toggle>
    
    <mat-button-toggle value="star" aria-label="Give a star">
      <mat-icon>star</mat-icon>
    </mat-button-toggle>
    
    <mat-button-toggle value="delete" aria-label="Delete item">
      <mat-icon>delete</mat-icon>
    </mat-button-toggle>
    
    <mat-button-toggle value="download" aria-label="Download item">
      <mat-icon>download</mat-icon>
    </mat-button-toggle>
  </mat-button-toggle-group>
</div>


<h1 style="padding-left:25px;" *ngIf="toggleGroup.value">
  You selected : {{toggleGroup.value}}
</h1>
app.module.ts [import] 

// for material icon
import {MatIconModule} from '@angular/material/icon';

// for material toggle button
import {MatButtonToggleModule} from '@angular/material/button-toggle';
More Angular tutorials
Labels: