1

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?

see this image

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.

MM1122
  • 23
  • 2
  • 6

3 Answers3

1

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;
}
andresn00
  • 11
  • 1
0

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%;
}
Dindayal Dhakar
  • 134
  • 9
  • I have already tried using css class, adding css styling to add margin to `right` side , but somehow it's not working. Although I am able to add margin to left side with the same property. – MM1122 Jan 12 '22 at 15:44
  • @MM1122: If you want to margin right side of input field, then you should reduce the input width. I have edited the answer. please check it – Dindayal Dhakar Jan 13 '22 at 05:39
0

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

 ::ng-deep .mat-form-field-infix {
      padding-left: 10px;
 }
Kishan Lal
  • 473
  • 1
  • 5
  • 13