Bug, feature request, or proposal:

After upgrading from angular 4 to angular 5. I am getting the following error message:

ERROR Error: MatToolbar: Attempting to combine different toolbar modes. Either specify multiple <mat-toolbar-row> elements explicitly or just place content inside of a <mat-toolbar> for a single row.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Angular 5, material 5.

Is there anything else we should know?

It is referring to the following code.

<div id="profile" class="body-1">

    <mat-toolbar color="primary">
        <span>Profile</span>
        <span class="example-spacer"></span> 

        <div *ngIf="!isItMyProfile()">

            <button mat-icon-button (click)="message()" matTooltip="Message">
                <mat-icon>message</mat-icon>
        </button>
            <button mat-icon-button *ngIf="!isFollowing()" (click)="follow()" matTooltip="Follow">
                    <mat-icon>person_add</mat-icon>
            </button>
            <button mat-icon-button *ngIf="isFollowing()" (click)="unfollow()" matTooltip="Unfollow">
                    <mat-icon>remove</mat-icon>
            </button>
        </div>

        <button mat-icon-button matTooltip="Share" matTooltip="Share">
                <mat-icon>share</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Search" matTooltip="Search">
                <mat-icon>search</mat-icon>
        </button>
        <button mat-icon-button matTooltip="Notifications">
                <mat-icon>notifications</mat-icon>
        </button>


        <button mat-icon-button [matMenuTriggerFor]="menu">
                <mat-icon>more_vert</mat-icon>
        </button>
        <mat-menu #menu="matMenu" yPosition="below" xPosition="after">
            <button mat-menu-item routerLink="edit">
                    <mat-icon>mode_edit</mat-icon>
                    <span>Edit Profile</span>
                </button>
        </mat-menu>

        <mat-toolbar-row class="profile-header" fxLayout="row" fxLayoutAlign="space-between center">

            <section fxLayout="row" fxLayoutAlign="space-between center" fxLayoutGap="20px">
                <div class="profile-picture">
                    <img src="http://via.placeholder.com/100x100" alt="" class="img-circle">
                </div>
                <div class="profile-user" fxLayout="column" fxLayoutAlign="center">
                    <span class="body-1">@{{user?.profile?.username}}</span>
                    <span class="body-1">{{user?.profile?.firstname}} {{ user?.profile?.lastname }}</span>
                </div>
            </section>


            <div class="profile-info" fxLayout="column" fxLayoutAlign="center start">

                <small class="profile-age">
                                <i class="fa fa-mars"></i>
                         [21]
                    </small>
                <small class="profile-location">
                        <mat-icon>location_on</mat-icon>
                        [Manchester, UK]
                    </small>

                <div fxLayout="row" fxLayoutAlign="center center">
                    <small *ngFor="let t of user?.profile?.languages.teach; let isLast=last">{{t.code}}{{isLast ? '' : ', '}} </small>
                    <mat-icon>keyboard_arrow_right</mat-icon>
                    <small *ngFor="let l of user?.profile?.languages.learn; let isLast=last">{{l.code}}{{isLast ? '' : ', '}} </small>
                </div>
            </div>

        </mat-toolbar-row>
        <mat-toolbar-row fxLayout="row" fxLayoutAlign="space-between end">

            <div class="profile-meta" fxLayout="row" fxFlex="25" fxLayoutAlign="center" fxLayoutGap="20px">

                <div fxLayout="column" fxFlex="33" fxLayoutGap="-10px">
                    <h4>0</h4>
                    <small>level</small>
                </div>
                <div fxLayout="column" fxFlex="33" fxLayoutGap="-10px">
                    <h4>{{user?.followers.length}}</h4>
                    <small (click)="openFollowers()">Followers</small>
                </div>
                <div fxLayout="column" fxFlex="33" fxLayoutGap="-10px">
                    <h4>{{user?.following.length}}</h4>
                    <small (click)="openFollowing()">Following</small>
                </div>
            </div>

            <nav mat-tab-nav-bar class="profile-navbar" backgroundColor="primary">
                <a mat-tab-link *ngFor="let link of navLinks" [routerLink]="link.path" routerLinkActive #rla="routerLinkActive" [active]="rla.isActive">
                    <mat-icon>{{link.icon}}</mat-icon>{{link.label}}
                </a>
            </nav>

        </mat-toolbar-row>
    </mat-toolbar>


    <div class="profile-content">
        <router-outlet></router-outlet>
    </div>

</div>