Angular - How to remove padding-right from mat-list-text?-CodePudding

I am trying to add a button to a mat-list-item. This is my current HTML template code:

<mat-selection-list
  [multiple]="false"
  [class.selected]="currentItem"
  formControlName="itemListControl"
>
  <mat-list-option
    *ngFor="let item of items"
    [value]="item.id"
  >
    <div style="display: flex; justify-content: space-between; align-items: center">
      <div style="display: flex; align-items: center">
        {{ item.name }}
      </div>
      <button mat-icon-button>
        <mat-icon>edit</mat-icon>
      </button>
    </div>
  </mat-list-option>
</mat-selection-list>

When I inspect the site in my browser, I can see that there is a 16px padding which moves the button to the left inside the list item:

I already tried removing it by adding this to my scss file for the component:

.mat-list-item {
  padding-right: 0 !important;
}

For some reason, this does not have any effect. It seems like this is not even applied at all to the element. What am I doing wrong and how can I get rid of this padding (without causing any potentially bad side effects)?

CodePudding user response：

Please use like below. It would work.

.mat-list-text {
  padding-right: 0 !important;
}

Thanks!

CodePudding user response：

Use the whole selector(instead of just .mat-list-text, copy all the selector part of the css highlighted in the image above) to remove the the padding, angular material is very hard to modify. Dont forget to add the !important aswell. I had to do this previously. I hope it will work for you aswell.