Here's how you can customize the appearance of an Angular Material toggle button. Although the method is unique, I'll explain it in this article.

\\n

1. How to use Angular Material button-toggle

\\n

Install Angular Material

\\n

ng add @angular/material\\n

\\n

Import Angular Material button-toggle to Module file

\\n

import {MatButtonToggleModule} from '@angular/material/button-toggle'\\n

\\n

Html

\\n

<mat-button-toggle [aria-label]="alertsEnabled ? 'Disable alerts' : 'Enable alerts'">\\n  <mat-icon>notifications</mat-icon>\\n</mat-button-toggle>\\n

\\n

For more details, refer to the official documentation:
\\nAngular Material Official Documentation

\`; constructor(private readonly prismService: PrismService) {} ngOnInit(){ this.code = HtmlUtils.addClassToHtml(this.code, 'line-numbers', 'pre'); } ngAfterViewChecked() { if (!this.highlighted && this.code) { this.prismService.highlightAll(); this.highlighted = true; } } } `,"data-language":"ts","data-theme":"github-dark-dimmed",style:{backgroundColor:"#22272e",color:"#adbac7"},tabIndex:"0",children:(0,n.jsxs)(l.code,{"data-language":"ts","data-theme":"github-dark-dimmed",style:{display:"grid"},children:[(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:"@"}),(0,n.jsx)(l.span,{style:{color:"#dcbdfb"},children:"Component"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:"({"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:" selector: "}),(0,n.jsx)(l.span,{style:{color:"#96d0ff"},children:"'my-app'"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:" standalone: "}),(0,n.jsx)(l.span,{style:{color:"#6cb6ff"},children:"true"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:" imports: [CommonModule, SharedModule],"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:" templateUrl: "}),(0,n.jsx)(l.span,{style:{color:"#96d0ff"},children:"'./main.html'"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:","})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:" styleUrls: ["}),(0,n.jsx)(l.span,{style:{color:"#96d0ff"},children:"'./main.scss'"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:"]"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:"})"})}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#f47067"},children:"export"}),(0,n.jsx)(l.span,{style:{color:"#f47067"},children:" class"}),(0,n.jsx)(l.span,{style:{color:"#f69d50"},children:" App"}),(0,n.jsx)(l.span,{style:{color:"#f47067"},children:" implements"}),(0,n.jsx)(l.span,{style:{color:"#6cb6ff"},children:" OnInit"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:","}),(0,n.jsx)(l.span,{style:{color:"#6cb6ff"},children:"AfterViewChecked"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:" {"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#f69d50"},children:" name"}),(0,n.jsx)(l.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#96d0ff"},children:" 'Angular'"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#f69d50"},children:" highlighted"}),(0,n.jsx)(l.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#6cb6ff"},children:" false"}),(0,n.jsx)(l.span,{style:{color:"#adbac7"},children:";"})]}),` `,(0,n.jsx)(l.span,{"data-line":"",children:" "}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#f69d50"},children:" code"}),(0,n.jsx)(l.span,{style:{color:"#f47067"},children:" ="}),(0,n.jsx)(l.span,{style:{color:"#96d0ff"},children:" `"})]}),` `,(0,n.jsxs)(l.span,{"data-line":"",children:[(0,n.jsx)(l.span,{style:{color:"#96d0ff"},children:"

Here's how you can customize the appearance of an Angular Material toggle button. Although the method is unique, I'll explain it in this article.

Angular prismjs example

Custom Angular Material toggule button

Angularでドロップダウンを利用する方法