Как установить значок и текст в строке 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;
}