свойства flexbox для выравнивания значка и текста в одном элементе div

Question

Я новичок в flexbox, и у меня возникают трудности с выравниванием иконки и текста в одной строке. У меня есть нога с адресами электронной почты и номером телефона, я хочу добавить значки к строкам текста.

Вот снимок экрана с нижним колонтитулом, который у меня сейчас есть, и вы можете видеть, что значок и текст не выровнены:

это мой html файл:

<ng-container>
  <div class="content-footer-container">
    <div class="first-text-block">
      <span class="material-icons">
        mail_outline
      </span>
      <a href="mailto:{{ supportInfo.emailAddress }}"> {{ supportInfo.name }}</a>
    </div>
    <div class="second-text-block">
      <span class="material-icons">
        phone
      </span>
      <span class="">{{ supportInfo.phoneNr }}</span>
    </div>
    <div class="third-text-block">
      <span class="">{{ supportInfo.applicationName }}</span>
    </div>
  </div>
</ng-container>

, а это мой css:

.content-footer-container {
  font-size: 12px;
  height: 80px;
  background-color: white;
  padding: 10px;
  display: flex;
  flex-direction:column;
  align-items: flex-start;
}

.material-icons {
  margin-right: 5px;
  text-align: center;
}

.first-text-block{
  flex:1;
  order:1;

  a {
    text-decoration:none
  }
}

I надеюсь, что кто-нибудь может помочь мне или указать мне правильное направление.

Спасибо, Пит

Answer 1

.first-text-block, second-text-block, third-text-block {
    display: flex;
    align-items: center;
}

было бы лучше просто дать им одно и то же имя класса

например

.icon {
    display: flex;
    align-items: center;
}