avoid line break in button with icon when screen becomes small flex-layout

Question

I have a problem with my resposive toolbar. I'm using angular flex-layout. When the user get into my app from a big screen, the toolbar looks like this :

So far so good. I added some logic because user may enter from tablets or mobile phones, so the toolbar hides the buttons and show a sidenav with the option:

All ok. But with some screen sizes, shit happens.. :

I don't know how to avoid that the icons and the buttons keep on the same line. Here's my code:

<mat-toolbar fxLayout="row">
    <button mat-icon-button (click)="sidenav.toggle()" fxHide fxShow.lt-md>
      <mat-icon>menu</mat-icon>
    </button>

    <div fxShow fxHide.lt-md fxLayout="row">
      <a mat-button fxLayout="row" fxLayoutWrap="wrap" >{{ 'menu.validations' | translate }}</a>
      <a mat-button [matMenuTriggerFor]="reports">{{ 'menu.reports' | translate }} <mat-icon>arrow_drop_down</mat-icon> </a>
      <a mat-button [matMenuTriggerFor]="management">{{ 'menu.management' | translate }} <mat-icon>arrow_drop_down</mat-icon> </a>
      <a mat-button [matMenuTriggerFor]="settings">{{ 'menu.settings' | translate }} <mat-icon>arrow_drop_down</mat-icon> </a>
    </div>
  
    <span class="spacer"></span>
  
    <div fxFlex fxLayoutAlign="end start">
      <!-- RRSS ICONS -->
    </div>
  
    <div fxShow="true" class="combo">
      <a mat-button matTooltip="{{ 'menu.profile.logout' | translate }}" (click)="logout()"><mat-icon>exit_to_app</mat-icon></a>
      <app-i18n-combo></app-i18n-combo>
    </div>
  </mat-toolbar>

Any help would be appreciated. Thanks in advance!