add spacing between matPrefix and matInput

Question

I want to add some spacing in between the matPrefix and matInput of mat-form-field in angular. How can I targed them in css?

here's my code:

.html:

<mat-form-field appearance="outline">
     <mat-label>Username</mat-label>
     <input matInput required>
     <span matPrefix class="prefix"><mat-icon>person</mat-icon></span>
</mat-form-field>

css:

.prefix{
color: rgb(0,0,0,0.45);
margin-right: 20px;
}

As you can see, I tried adding class and then selecting the matPrefix with a class, it works fine with left margin, but now with right margin.

Answer 1

If you want to give a margin in input field. you need to reduce the input width. I have added class="username"

<mat-form-field appearance="outline">
   <mat-label>Username</mat-label>
   <input matInput class="username" required />
   <span matPrefix class="prefix"><mat-icon>person</mat-icon></span>
</mat-form-field>

.username {
  width: 90%;
}

Answer 2

I faced the same issue and the below CSS fixed the issue for me

 ::ng-deep .mat-form-field-infix {
      padding-left: 10px;
 }

Answer 3

You can modify mat-form-field-prefix class with:

::ng-deep .mat-form-field-prefix {
  margin-right: 20px;
}

or assign a class to your mat-form-field first and use:

.example-class ::ng-deep .mat-form-field-prefix {
  margin-right: 20px;
}