<div class="icon">
  <div class="icon__wrap">
    <svg-icon class="blue big" src="./assets/icons/user.svg"></svg-icon>
  </div>
</div>
<div class="user-info">
  <span>Logged as: {{userInformation?.userId}}</span>
  <button mat-button class="user-info__button" (click)="toggleRoles();" aria-expanded="true" aria-controls="roles">
    <span>Roles</span>
  </button>
</div>
<div class="roles" [@toggleDown]="showRoles">
  <span><i>{{roles}}</i></span>
</div>