Alignment of list items when using variable sized font awesome icons

I am trying to list all the contact details of a company.
I am using different icons from font awesome.
Each icon does not have the same width.
How to I properly left allight all the text?
I managed to algin the text flowing over multiple lines using flex layout.
The display area is limited to 230px

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  font-family: Arial, Helvetica, sans-serif;
}


/*
        https://fontawesome.com/v5/search
        */

ul.ContactUs {
  list-style-type: none;
  display: flex;
  /* Use flex layout for the list */
  flex-direction: column;
  /* Stack the list items vertically */
  align-items: left;
  /* Align the list items vertically at the center */
}

ul.ContactUs li {
  display: flex;
  padding: 4px 0;
  color: black;
}

ul.ContactUs li:before {
  font-family: 'FontAwesome';
  content: '\f067';
  margin: 0 11px 0 -25px;
}

ul.ContactUs li.address:before {
  content: '\f60e';
}

ul.ContactUs li.phone:before {
  content: '\f879';
}

ul.ContactUs li.mobile:before {
  content: '\f3cd';
}

ul.ContactUs li.email:before {
  content: '\f0e0';
  margin-right: 0.5em;
  /* Some space between the icon and the text */
}

<!-- language: lang-html -->

<!--Fontawsome  -->
<script src="https://kit.fontawesome.com/d2ee99dc46.js" crossorigin="anonymous"></script>
  <div style="width: 230px; border: 1px solid black;"><h4>Contact Us</h4><ul class="ContactUs"><li class="address">63 Street name,
  Azaadville,
  Johannesburg,
  South Africa,
  1754</li><li class="phone">011 768 3415</li><li class="mobile">082 554 0050</li><li class="email">Hello(at) Companyname.co.za</li></ul></div>

<!-- end snippet -->

I edited a little you example, I added gap: 5px; to the li to controls the space between flex items, I also removed the margin-right for email li so the email text will be aligned with the previews texts, Then like mok_ku said I added flex: 0 0 20px; to ul.ContactUs li:before so the width is fixed to 20px:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  font-family: Arial, Helvetica, sans-serif;
}

/*
  https://fontawesome.com/v5/search
*/

ul.ContactUs {
  list-style-type: none;
  display: flex;
  /* Use flex layout for the list */
  flex-direction: column;
  /* Stack the list items vertically */
  align-items: left;
  /* Align the list items vertically at the center */
}

ul.ContactUs li {
  display: flex;
  padding: 4px 0;
  color: black;
  gap: 5px;
}

ul.ContactUs li:before {
  font-family: 'FontAwesome';
  content: '\f067';
  margin: 0 11px 0 -25px;
  flex: 0 0 20px;
}

ul.ContactUs li.address:before {
  content: '\f60e';
}

ul.ContactUs li.phone:before {
  content: '\f879';
}

ul.ContactUs li.mobile:before {
  content: '\f3cd';
}

ul.ContactUs li.email:before {
  content: '\f0e0';
  /* Some space between the icon and the text */
}

<!-- language: lang-html -->

<!--Fontawsome  -->
<script src="https://kit.fontawesome.com/d2ee99dc46.js" crossorigin="anonymous"></script>
<div style="width: 230px; border: 1px solid black;">
  <h4>Contact Us</h4>
  <ul class="ContactUs">
    <li class="address">
      63 Street name,
      Azaadville,
      Johannesburg,
      South Africa,
      1754
    </li>
    <li class="phone">011 768 3415</li>
    <li class="mobile">082 554 0050</li>
    <li class="email">Hello(at) Companyname.co.za</li>
  </ul>
</div>

<!-- end snippet -->

I would place the icons directly in the HTML file instead of working with :before pseudo-elements in CSS.

I don't think the ul should have a display of flex here. Instead I would make each of the list items a flex box and give the div that contains the icons a certain width, for example 15%, and give the other 85% to the text.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

body {
  font-family: Arial, Helvetica, sans-serif;
}

.contact-info {
  font-style: normal;
  width: 230px;
  border: 1px solid black;
}
.contact-info h4 {
  text-align: center;
}

.contact-info__list {
  list-style-type: none;
  margin: 0 0 0 20px;
  padding: 0;
}

.contact-info__list__item {
  display: flex;
  align-items: center;
}

.contact-info__list__item__icon {
  width: 15%;
}

.contact-info__list__item__text {
  width: 85%;
}

<!-- language: lang-html -->

    <script
      src="https://kit.fontawesome.com/d2ee99dc46.js"
      crossorigin="anonymous"
    ></script>

<address class="contact-info">
      <h4>Contact Us</h4>
      <ul class="contact-info__list">
        <li class="contact-info__list__item">
          <div class="contact-info__list__item__icon">
            <i class="fa-solid fa-address-book"></i>
          </div>
          <p class="contact-info__list__item__text">
            63 Street name, Azaadville, Johannesburg, South Africa, 1754
          </p>
        </li>
        <li class="contact-info__list__item">
          <div class="contact-info__list__item__icon">
            <i class="fa-solid fa-phone-flip"></i>
          </div>
          <p class="contact-info__list__item__text">011 768 3415</p>
        </li>
        <li class="contact-info__list__item">
          <div class="contact-info__list__item__icon">
            <i class="fa-solid fa-mobile-screen-button"></i>
          </div>
          <p class="contact-info__list__item__text">082 554 0050</p>
        </li>
        <li class="contact-info__list__item">
          <div class="contact-info__list__item__icon">
            <i class="fa-solid fa-envelope"></i>
          </div>
          <p class="contact-info__list__item__text">
            Hello(at) Companyname.co.za
          </p>
        </li>
      </ul>
    </address>

<!-- end snippet -->