如何在mat-list-option Angular 5 Material Design中内嵌图标和文本

Question

<mat-selection-list [(ngModel)]="selectedContactTypes" [ngModelOptions]="{standalone: true}">
                    <mat-list-option *ngFor="let ct of contacttypes" [checkboxPosition]="before" [value]="ct.id+'_'+ct.description">
                        <mat-icon matListIcon>perm_contact_calendar</mat-icon>
                        {{ct.description}}
                    </mat-list-option>
                </mat-selection-list>

Answer 1

在这种情况下，将它们包裹在div上可以完成任务：

<mat-selection-list [(ngModel)]="selectedContactTypes" [ngModelOptions]="{standalone: true}">
    <mat-list-option *ngFor="let ct of contacttypes" [checkboxPosition]="before" [value]="ct.id+'_'+ct.description">
        <div>
            <mat-icon matListIcon>perm_contact_calendar</mat-icon>
            {{ct.description}}
        </div>
    </mat-list-option>
</mat-selection-list>

<强>更新

并且，如果您想要垂直居中，请将display: flex和align-items: center应用于div

<mat-selection-list [(ngModel)]="selectedContactTypes" [ngModelOptions]="{standalone: true}">
    <mat-list-option *ngFor="let ct of contacttypes" [checkboxPosition]="before" [value]="ct.id+'_'+ct.description">
        <div class="center-vertically">
            <mat-icon matListIcon>perm_contact_calendar</mat-icon>
            {{ct.description}}
        </div>
    </mat-list-option>
</mat-selection-list>

CSS：

.center-vertically{
    display:flex;
    align-items: center;
}