CODEWITHSUNDEEP
angularmaterial-design
Tzvi Gregory Kaidanov
Tzvi Gregory Kaidanov

Reputation: 3140

How to set icon and text inline in mat-list-option Angular 5 Material Design

<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>

enter image description here

Upvotes: 2

Views: 6509

Answers (1)

Gobli
Gobli

Reputation: 347

In this case, wrapping them on a div will do the job: 

<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>

Update

And, if you wanna center them vertically, apply display: flex and align-items: center to the 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;
}

Upvotes: 4

Related Questions