Transform Word into Icon in Angular

I'm have a page that the footer contains a lot of info of a gym, Contact, Location etc...

The gym i picked for example contains 5 means of contact, that are:

• Commercial Phone
• Whatsapp
• Instagram
• Facebook
• Email

This is how the json look like:

"ExibirContatos": [
                {
                    "ID_TipoContato": "2",
                    "TipoDescricao": "Telefone comercial",
                    "Contato": "(31)2523-0672"
                },
                {
                    "ID_TipoContato": "9",
                    "TipoDescricao": "Whatsapp",
                    "Contato": "(31)98428-6287"
                },
                {
                    "ID_TipoContato": "5",
                    "TipoDescricao": "Instagram",
                    "Contato": "@br_fit_"
                },
                {
                    "ID_TipoContato": "7",
                    "TipoDescricao": "Facebook",
                    "Contato": "https://www.facebook.com/brfitbh/"
                },
                {
                    "ID_TipoContato": "4",
                    "TipoDescricao": "E-mail",
                    "Contato": "contato@brfitbh.com.br"
                }
            ]

TS:

import {HttpClient} from '@angular/common/http';

import { Academia } from '../../classes/academia';

interface AcademiaRequest {
  ACADEMIA_INFO: any;
}

export class HomePageComponent implements OnInit {

  academia: Academia = new Academia();

  constructor(private http: HttpClient) {}

  ngOnInit() {
    this.receberAcademia(this.academia);
  }

  receberAcademia(academia) {
    this.http
      .get<AcademiaRequest>(
        'http://fitgroup.com.br/vysor_vendas_online/fg_vendas.php?AuthToken=FlnPoU230xGF&Metodo=academiaLoad&IDCliente=000949'
      )
      .subscribe(response => {
        academia.nome = response.ACADEMIA_INFO.AcademiaDados.NomeAcademia;
        academia.rua = response.ACADEMIA_INFO.AcademiaDados.EnderecoLogradouro;
        academia.numero = response.ACADEMIA_INFO.AcademiaDados.EnderecoNumero;
        academia.cep = response.ACADEMIA_INFO.AcademiaDados.EnderecoCEP;
        academia.cidade = response.ACADEMIA_INFO.AcademiaDados.EnderecoCidade;
        academia.estado = response.ACADEMIA_INFO.AcademiaDados.EnderecoUF;
        academia.contatos = response.ACADEMIA_INFO.VendasOnline.ExibirContatos;
      });
  }
}

Academia Class:

export class Academia {

  registros: number;
  nome: string;

  // Endereço

  rua: string;
  numero: string;
  cep: string;
  cidade: string;
  estado: string;

  // Contato

  contatos: any[];
}

And for last, my HTML:

<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
   <h5 class="mb-4 ml-4 font-weight-bold">
      CONTATO:
   </h5>
   <ul class="f-address">
      <li *ngFor="let contatos of academia.contatos">
         <p> {{contatos.TipoDescricao }}: {{ contatos.Contato }} </p>
      </li>
   </ul>
</div>

It's printing something like that:

But i don't want the name of the contact, i don't want "Telefone Comercial:", "Whatsapp" and etc... I want these names to be replaced by icons, fontawesome icons, these icons respectively:

1. <i class="fas fa-phone-alt"></i>
2. <i class="fas fa-whatsapp"></i>
3. <i class="fas fa-instagram"></i>
4. <i class="fas fa-facebook"></i>
5. <i class="fas fa-envelope"></i>

But i don't have any ideas how to do such a conversion, i even have thinked in this code:

<div class="col-lg-3 col-md-6 col-sm-6 mt-2 mb-4">
      <h5 class="mb-4 ml-4 font-weight-bold">
            CONTATO:
      </h5>
      <ul class="f-address">
            <li *ngFor="let contatos of academia.contatos">
                  <p> <i class="fas {{ contatos.TipoDescricao }}"></i> {{ contatos.Contato }} </p>
            </li>
      </ul>
</div>

But first i need to convert to the rest of the icon's name "fa-icon_name", how can i do that? Please help me!!