Skip to main content

angular material - Icon only Button toggle

app.component.html 

<h2>Angular Material - Icon only Button toggle</h2>


<div style="padding:25px; background-color:lightgray;">
  <h3>Appearance Standard (Default)</h3>

  <mat-button-toggle 
    #toggleWifi
    appearance="standard">
      <mat-icon>
        {{toggleWifi.checked? 'wifi' : 'wifi_off'}}
      </mat-icon>
  </mat-button-toggle>
  
  <h1 style="padding:25px;">
    Wifi is now {{toggleWifi.checked? 'on' : 'off'}}.
  </h1>
</div>


<div style="padding:25px; background-color:lightgray;">
  <h3>Appearance Legacy</h3>

  <mat-button-toggle 
    #toggleLocation 
    appearance="legacy">
      <mat-icon>
        {{toggleLocation.checked? 'edit_location' : 'location_off'}}
      </mat-icon>
  </mat-button-toggle>
  
  <h1 style="padding:25px;">
    Location is now {{toggleLocation.checked? 'on' : 'off'}}.
  </h1>
</div>
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: