Fix icons for mobile devices

src/app/components/shared/header/header.component.html

@@ -45,25 +45,33 @@
       </mat-grid-list>
     </mat-menu>
 
-    <button mat-button [matMenuTriggerFor]="themeMenu">
+    <button mat-button *ngIf="deviceType === 'desktop'" [matMenuTriggerFor]="themeMenu">
       <div class="label-icon">
         <mat-icon aria-label="Example" class="header-icons">palette</mat-icon>
-        <h3 *ngIf="deviceType === 'desktop'">{{'header.style' | translate}}</h3>
+        <h3>{{'header.style' | translate}}</h3>
       </div>
     </button>
 
+    <button mat-icon-button *ngIf="deviceType === 'mobile'" [matMenuTriggerFor]="themeMenu">
+      <mat-icon class="header-icons">palette</mat-icon>
+    </button>
+
     <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
       <button mat-menu-item (click)="useLanguage('de')">{{ 'header.german' | translate }}</button>
       <button mat-menu-item (click)="useLanguage('en')">{{ 'header.english' | translate }}</button>
     </mat-menu>
 
-    <button mat-button [matMenuTriggerFor]="langMenu">
+    <button mat-button *ngIf="deviceType === 'desktop'" [matMenuTriggerFor]="langMenu">
       <div class="label-icon">
         <mat-icon class="header-icons" matTooltip="{{'header.change-language' | translate}}">language</mat-icon>
-        <h3 *ngIf="deviceType === 'desktop'">{{'header.language' | translate}}</h3>
+        <h3>{{'header.language' | translate}}</h3>
       </div>
     </button>
 
+    <button mat-icon-button *ngIf="deviceType === 'mobile'" [matMenuTriggerFor]="langMenu">
+      <mat-icon class="header-icons">language</mat-icon>
+    </button>
+
     <mat-menu #userMenu="matMenu" [overlapTrigger]="false">
       <button mat-menu-item *ngIf="user && user.role === 1" routerLink="/creator">
         <mat-icon class="sessions">style</mat-icon>
@@ -90,17 +98,27 @@
       </button>
     </mat-menu>
 
-    <button mat-button *ngIf="user" [matMenuTriggerFor]="userMenu">
+    <button mat-button *ngIf="user && deviceType === 'desktop'" [matMenuTriggerFor]="userMenu">
       <div class="label-icon">
         <mat-icon class="header-icons">account_box</mat-icon>
-        <h3 *ngIf="deviceType === 'desktop'">{{'header.my-account' | translate}}</h3>
+        <h3>{{'header.my-account' | translate}}</h3>
       </div>
     </button>
-    <button mat-button *ngIf="!user" [matMenuTriggerFor]="loginMenu">
+
+    <button mat-icon-button *ngIf="user && deviceType === 'mobile'" [matMenuTriggerFor]="userMenu">
+      <mat-icon class="header-icons">account_box</mat-icon>
+    </button>
+
+    <button mat-button *ngIf="!user && deviceType === 'desktop'" [matMenuTriggerFor]="loginMenu">
       <div class="label-icon">
         <mat-icon class="header-icons">account_box</mat-icon>
         <h3 *ngIf="deviceType === 'desktop'">{{'header.login' | translate}}</h3>
       </div>
     </button>
+
+    <button mat-icon-button *ngIf="!user && deviceType === 'mobile'" [matMenuTriggerFor]="loginMenu">
+      <mat-icon class="header-icons">account_box</mat-icon>
+    </button>
+
   </mat-toolbar-row>
 </mat-toolbar>