app.component.html
<h2 style="padding-top:25px; padding-bottom:25px;">
Angular Material - Icon inside Expansion Panel header
</h2>
<mat-expansion-panel>
<mat-expansion-panel-header>
<mat-panel-title>
<mat-icon style="margin-right:12px;">
download
</mat-icon>
Download
</mat-panel-title>
<mat-panel-description style="justify-content:space-between;">
My saved files
<mat-icon>save</mat-icon>
</mat-panel-description>
</mat-expansion-panel-header>
Content: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Pellentesque nec bibendum ligula. Pellentesque imperdiet
non massa at sodales. Cras nibh elit, iaculis id semper in,
euismod eu ante. Morbi ac massa pellentesque, porta
velit sed, elementum ipsum. Duis sed risus sit amet tellus
euismod consequat sed a ante. Lorem ipsum dolor
sit amet, consectetur adipiscing elit.
</mat-expansion-panel>
app.module.ts [import]
import {MatExpansionModule} from '@angular/material/expansion'
import { MatIconModule } from '@angular/material/icon';
- angular material - Action bar inside an Expansion Panel
- angular material - Expansion Panel opened & closed event
- angular material - Show Accordion toggle icon on left
- angular material - Open & close Accordion all panels at once
- angular material - Determine an Expansion Panel is opened or closed
- angular material - Determine an Expansion Panel is disabled or enabled
- angular material - How to toggle Expansion Panel expanded state
- angular material - Initially expand a panel in Accordion
- angular material - Expansion Panel expandedChange event
- angular material - How to change Expansion Panel header height
- angular material - How to use List
- angular material - List items separator
- angular material - How to generate List items from array
- angular material - Action list with button and icon
- angular material - How to use Selection List