angular4 + material：如何在同一行显示输入和图标

Question

I am using this form :

I'd like to have the icon on the same line as the input.

For name and first name, it worked when surrounding them with a div. I have not found what to add in .css to achieve that for the URL. Do you know how to do that?

Note that Name and Firstname inputs do not take the whole line. I do not know why. Any idea?

.mat-card {
  width: 450px;
  margin: auto;
  margin-top: 50px;
}
form {
  display: flex;
  flex-direction: column;
}

.cardtitle {
  font-size: 20px;
}

.mat-input-container {
  margin-bottom: .3em;
}

.img_portrait {
  margin-left: auto;
  margin-right: auto;
}
.urlbio {
  width: 350px;
}
.urlbio_icon {
   style: inline-block;
}

<mat-card>

  <mat-card-header>
    <mat-card-title class="cardtitle"> {{ formTitle }} </mat-card-title>
  </mat-card-header>

  <mat-card-content> <!-- {{{ -->

    <form [formGroup]="editAuthorForm" (ngSubmit)="editAuthor()">

      <div> <!-- {{{ Prénom Nom -->
        <mat-input-container>
          <input matInput type="text" placeholder="Prénom" formControlName="firstname" >
        </mat-input-container>
        <mat-input-container>
          <input matInput type="text" placeholder="Nom" formControlName="name" >
        </mat-input-container>
      </div> <!-- }}} -->
      <div> <!-- {{{ Dates -->
        <mat-input-container>
          <input matInput type="text" placeholder="Né(e) le" formControlName="birthdate" >
        </mat-input-container>
        <mat-input-container>
          <input matInput type="text" placeholder="Décédé(e) le" formControlName="deathdate" >
        </mat-input-container>
      </div> <!-- }}} -->
      <!-- {{{ Portrait -->
      <mat-input-container>
        <input matInput type="text" placeholder="Lien portrait" formControlName="urlimg" >
      </mat-input-container>
      <div *ngIf="(imgToDisplay$ | async) as img"  class="img_portrait">
        <img src="{{ img }}" height="150px">
      </div> <!-- }}} -->
      <!-- {{{ bio -->
       <div>
       <mat-input-container class="urlbio">
        <input matInput type="text" placeholder="Lien biographie" formControlName="urlbio" class="urlbio">
       </mat-input-container>
       <div *ngIf="(urlToDisplay$ | async) as url" class="urlbio_icon" >
        <a href="{{ url }}" target="urlbio" ><mat-icon>launch</mat-icon></a>
      </div>
      </div>
      <!-- }}} -->

      <!-- {{{ Boutons -->
      <mat-card-actions style="text-align:center;">
        <button mat-raised-button color="primary" style="margin:auto" type="submit" [disabled]="!editAuthorForm.valid"> Enregistrer </button>
        <button mat-raised-button style="margin:auto" type="button" (click)="cancelEditing()"> Annuler </button>
      </mat-card-actions> <!-- }}} -->

    </form>

  </mat-card-content> <!-- }}} -->

</mat-card>

Answer 1

Simply add this in css file :

.urlbio_icon {
  display: inline-block;
}