Prefix icon overlapping content for select input-field Materialize

My team and I are currently working on a web app that needs a register form. We decided to use the Materialize framework to ease the development of the front, and now we are facing something really unpleasant: the prefix icons for all our select fields are overlapping the fields.

We already tried to follow what we found on other websites - apparently, this is a known issue that may have been fixed.

So this is the code now:

M.AutoInit();

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>


<div class="container">
  <div class="row">
    <form class="col s12">
      <div class="row">

        <div class="input-field col s12">
          <i class="material-icons prefix">keyboard</i>
          <input id="code" type="text" class="validate" v-model="sponsor">
          <label for="code">Code Mairie</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">mail</i>
          <input id="email" type="text" class="validate" v-model="email">
          <label for="email">Email</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">vpn_key</i>
          <input id="password" type="password" class="validate" v-model="password">
          <label for="password">Mot de passe</label>
        </div>

        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="last_name" type="text" class="validate" v-model="lastName">
          <label for="last_name">Nom</label>
        </div>

        <div class="input-field col s6">
          <i class="material-icons prefix">account_circle</i>
          <input id="first_name" type="text" class="validate" v-model="firstName">
          <label for="first_name">Prénom</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">date_range</i>
          <input id="dob" type="text" class="datepicker">
          <label for="dob">Date de naissance</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">account_box</i>
          <select id="gender" v-model="gender">
            <option value="" disabled selected>Choisir votre sexe</option>
            <option value="1">Homme</option>
            <option value="2">Femme</option>
            <option value="3">Autre</option>
          </select>
          <label for="gender">Sexe</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">favorite</i>
          <select id="maritalSituation" v-model="maritalSituation">
            <option value="" disabled selected>Choisir votre situation</option>
            <option value="1">Célibataire</option>
            <option value="2">Concubinage</option>
            <option value="3">Marié(e)</option>
            <option value="4">Divorcé(e)</option>
            <option value="5">Veuf/Veuve</option>
          </select>
          <label for="maritalSituation">Situation maritale</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">work</i>
          <select id="professionalSituation" v-model="professionalSituation">
            <option value="" disabled selected>Choisir votre situation</option>
            <option value="1">Retraité(e)</option>
            <option value="2">Employé(e)</option>
            <option value="3">Sans Emploi</option>
          </select>
          <label for="professionalSituation">Situation Professionelle</label>
        </div>

        <div class="input-field col s12">
          <i class="material-icons prefix">local_phone</i>
          <input id="phone1" type="text" class="validate" v-model="phone">
          <label for="phone1">Téléphone 1</label>
        </div>
        <div class="input-field col s12">
          <i class="material-icons prefix">location_on</i>
          <input id="street" type="text" class="validate" v-model="street">
          <label for="street">Rue</label>
        </div>

        <div class="input-field col s4">
          <i class="material-icons prefix">location_on</i>
          <input id="postCode" type="text" class="validate" v-model="postalCode">
          <label for="postCode">Code postal</label>
        </div>

        <div class="input-field col s8">
          <i class="material-icons prefix">location_city</i>
          <input id="city" type="text" class="validate" v-model="city">
          <label for="city">Ville</label>
        </div>
      </div>
    </form>
    <a class="waves-effect waves-light btn col s10 offset-s1" @click="register">S'inscrire</a>
  </div>
</div>

If you run this, you will see that the result is just as expected. But if you take a look at this screenshot, this is the result that we have on our app.

I checked all the versions and updated everything, we are using:
- materialize-css: ^1.0.0-rc2
- material-design-icons: ^3.0.1

Any help figuring out why this happens would be greatly appreciated.

Thanks by advance!

Solution

In the end we found the error was coming from a property added to a parent div (like 6 or 7 nodes above) that centered the text.
Still, it is strange that this error only happens for the select input fields, but the problem is now fixed.

Little tip to anyone experiencing the same issue: ensure that there is no property inherited from a parent node - even if it can be tedious - that results in a strange display.