Mat-pseudo-checkbox icon off-center and smaller than usual

While implementing a list of checkboxes, it came to my attention that the mark when the checkbox is checked isn't styled the way it is supposed to be. When I compare it to the documentation, I notice it is a lot smaller and way off-center. I'm starting to wonder if this has something to do with my other css, or if I'm missing something.

HTML

<div class="general-wrapper">
  <h3>Users ()</h3>
  <div class="wrapper">
    <div class="filterbar">
      <mat-icon>search</mat-icon>
      <div class="form-wrapper">
        <mat-form-field>
          <input matInput (keyup)="applyFilter($event.target.value)" placeholder="Filter">
        </mat-form-field>
      </div>
    </div>

    <div>
      <mat-form-field>
        <mat-label>Columns</mat-label>
        <mat-select [formControl]="columns" multiple>
          <mat-select-trigger>
            
            <span *ngIf="columns.value?.length > 1" class="additional-selection">
              (+ )
            </span>
          </mat-select-trigger>
          <mat-option *ngFor="let column of selectedColumns" [value]="column"></mat-option>
        </mat-select>
      </mat-form-field>
    </div>
  </div>
... rest of page
</div>

CSS

::ng-deep .mat-focused .mat-form-field-label {
  /*change color of label*/
  color: #f59225 !important;
}

::ng-deep.mat-form-field-underline {
  /*change color of underline*/
  background-color: #f59225 !important;
}

::ng-deep.mat-form-field-ripple {
  /*change color of underline when focused*/
  background-color: #f59225 !important;
  ;
}

::ng-deep .mat-primary .mat-pseudo-checkbox-checked {
  background: #f59225;
}

.download-btn {
  background-color: #f59225;
  color: #f9f9f9;
}

.additional-selection {
  opacity: 0.75;
  font-size: 0.75em;
}

.wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;

}

.form-wrapper {
  width: 100%;
}

.filterbar {
  display: flex;
  align-items: center;
  width: 50%;
}

mat-form-field {
  width: 100%;
}

mat-table {
  margin: 5px;
  width: 100%
}

.mat-row:hover {
  cursor: pointer;
  background-color: gainsboro;
}

.spinner-card {
  display: flex;
  justify-content: center;
  align-items: center;
}

.general-wrapper {
  width: 90%;
  margin: 0 auto;
}

body,
html {
  width: 100%;
}

mat-cell:last-of-type {
  margin-right: 0px;
}

mat-cell {
  word-wrap: break-word;
  word-break: normal;
  margin-right: 8px;
}

.status ::ng-deep .mat-progress-spinner circle,
.mat-spinner circle {
  stroke: #f59225 !important;
}

this is what my checkboxes currently look like: