Angular Material ComboBox / Spinner with rating stars

Hi, I would like to do a spinner / combobox where I could choose the rating in stars. I have managed to make the combobox have different options, from without qualifying to 5 stars as shown in the following image:

But when I select one of the options that is not 'unqualified' , it returns the code instead of leaving me the number of stars that I have selected as shown below:

How could I make the stars come out instead of the code?

below I leave the code of the form:

    <style>
  mat-form-field {
    width: 60%;
    margin-bottom: 8px;
    font-size: 20px;
  }

  #botonera a {
    margin: 8px;
  }
</style>


<div class="col-lg-12">
  <h2 style="text-align: center">Creacion de empleado</h2>
</div>
<div class="col-lg-12" style=" text-align: center">
  <div class="example-container">

    <mat-form-field hintLabel="">
      <input matInput #input maxlength="9" placeholder="DNI">
    </mat-form-field>


    <mat-form-field hintLabel="">
      <input matInput #input placeholder="Nombre">
    </mat-form-field>

    <mat-form-field hintLabel="">
      <input matInput #input  placeholder="Apellidos">
    </mat-form-field>

    <mat-form-field hintLabel="">
      <input matInput #input placeholder="Departamento" >
    </mat-form-field>

    <mat-form-field hintLabel="">
      <input matInput #input type="number" min="0" placeholder="Sueldo">
    </mat-form-field>

    <mat-form-field hintLabel="">
      <input matInput #input type="date" placeholder="Fecha de nacimiento">
    </mat-form-field>


    <mat-form-field>


      <mat-select placeholder="Selecciona la valoracion del empleado">


        <mat-option value="option">
          <label>
            Sin Calificar
          </label>
        </mat-option>
        <mat-option value="option">
          <i class="material-icons">
            star_border
          </i>
        </mat-option>
        <mat-option value="option">
          <i class="material-icons">
            star_border star_border
          </i>
        </mat-option>
        <mat-option value="option">
          <i class="material-icons">
            star_border star_border star_border
          </i>
        </mat-option>
        <mat-option value="option">
          <i class="material-icons">
            star_border star_border star_border star_border
          </i>
        </mat-option>
        <mat-option value="option">
          <i class="material-icons">
            star_border star_border star_border star_border star_border
          </i>
        </mat-option>

      </mat-select>

    </mat-form-field>

    <div id="botonera">
      <a mat-raised-button color="primary">Enviar</a>
      <a mat-raised-button>Limpiar</a>
    </div>

  </div>

</div>