next-ucap-messenger/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/intro.component.html

<div fxFlex fxLayout="column" fxLayoutAlign="center center">
  <div class="empty-logo" fxLayoutAlign="center center" fxLayout="column">
    <div
      class="big-circle app-logo border-accent-color"
      fxLayoutAlign="center center"
      [@animate]="{ value: '*', params: { delay: '50ms', scale: '0.2' } }"
    >
      <!--<mat-icon class="s-64 s-md-128 mat-accent">chat</mat-icon>-->
      <img src="assets/images/logo/bg_logo_w120.png" />
    </div>

    <span
      class="app-title text-accent-darkest "
      [@animate]="{ value: '*', params: { delay: '100ms', y: '25px' } }"
    >
      {{ getTitle() }}
    </span>

    <span
      fxHide
      fxShow.gt-md
      class="app-message secondary-text"
      [@animate]="{ value: '*', params: { delay: '200ms', y: '50px' } }"
    >
      Select a contact to start a chat!
    </span>
  </div>
</div>