Прикрепление значков к углам контейнера flexbox с помощью flex-start и flex-end

У меня есть видеоконтейнер. Когда видео не воспроизводится, мне нужны три вещи:

• Значок или инициалы удаленного пользователя (верхний левый угол)
• Значок воспроизведения видео (в центре)
• расширить/свернуть (нижний правый угол)

Я пытался сдвинуть значки по углам с помощью align-self: flex-start и align-self: flex-end, но они не собираются по углам. В то же время я хочу, чтобы значок видео находился в центре поля.

Пока у меня это:

Мой СКСС:

.video-container {
  width: 270px;
  height: 202px;
  border: 1px solid #cececc;
  background-color: $grey-light;
  padding: 15px;
  margin: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  .top-left {
    align-self: flex-start;
  }
  .bottom-right {
    align-self: flex-end;
  }
}

HTML:

  <div class='video-container' id='remote-media' data-target='video.remoteContainer'>
    <span class='top-left'>
      <%= concept(Avatar::Cell,@meeting.invitee_id,current_user: current_user ) %>
    </span>
    <i class = "fa fa-video fa-3x"></i>
    <span class='video-expand bottom-right'>
      <i class = "far fa-expand-arrows-alt fa-2x" data-target='video.expand' data-action='click->video#expand'></i>
      <i class = "far fa-compress-alt fa-2x display-none" data-target='video.contract' data-action='click->video#contract'></i>
    </span>
  </div>