Unable to Apply CSS Styles to Angular Material mat-icon in Nested Components - Stack Overflow

admin管理员组

文章数量:1317898

I am trying to apply custom styles to a mat-icon element inside an Angular Material component, but no matter what I do, the styles won't take effect. Here's a simplified version of my code:

Html:

<mat-form-field appearance="fill" class="example-field">
  <mat-label>Select an Option</mat-label>
  <mat-select [formControl]="exampleControl" (selectionChange)="onOptionSelected($event.value)">
    <mat-option *ngFor="let option of availableOptions" [value]="option">
      <mat-icon [inline]="true">settings</mat-icon>
      {{ "example.option." + option | lowercase | translate }}
    </mat-option>
  </mat-select>
</mat-form-field>

CSS:

:host {
  ::ng-deep {
    mat-form-field {
      mat-select {
        mat-option {
          mat-icon {
            margin-right: 0;
          }
        }
      }
    }
  }
}

I am trying to apply custom styles to a mat-icon element inside an Angular Material component, but no matter what I do, the styles won't take effect. Here's a simplified version of my code:

Html:

<mat-form-field appearance="fill" class="example-field">
  <mat-label>Select an Option</mat-label>
  <mat-select [formControl]="exampleControl" (selectionChange)="onOptionSelected($event.value)">
    <mat-option *ngFor="let option of availableOptions" [value]="option">
      <mat-icon [inline]="true">settings</mat-icon>
      {{ "example.option." + option | lowercase | translate }}
    </mat-option>
  </mat-select>
</mat-form-field>

CSS:

:host {
  ::ng-deep {
    mat-form-field {
      mat-select {
        mat-option {
          mat-icon {
            margin-right: 0;
          }
        }
      }
    }
  }
}

• css
• angular
• sass
• angular-material
• ng-deep

Share Improve this question Follow edited Jan 22 at 15:36 Naren Murali 58.8k55 gold badges4444 silver badges7777 bronze badges asked Jan 22 at 15:26 Newsha NikNewsha Nik 94744 gold badges1313 silver badges3434 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 2

The select dropdown get's attached to the root element and not inside the component. To overcome this you can use panelClass to add a class to the dropdown root, and then style the inner contents.

HTML:

<h4>Basic mat-select</h4>
<mat-form-field>
  <mat-label>Favorite Car</mat-label>
  <mat-select [panelClass]="'custom-dropdown'">
    @for (car of cars; track car) {

    <mat-option [value]="car" [appTransform]="car">
      <mat-icon [inline]="true">settings</mat-icon>
    </mat-option>
    }
  </mat-select>
</mat-form-field>

---

From Global styles:

.custom-dropdown {
  mat-option.mat-mdc-option {
    mat-icon.mat-icon,
    mat-icon.mat-pseudo-checkbox-full {
      margin-right: 0;
    }
  }
}

Stackblitz Demo

---

From Component:

::ng-deep .custom-dropdown {
  mat-option.mat-mdc-option {
    mat-icon.mat-icon,
    mat-icon.mat-pseudo-checkbox-full {
      margin-right: 0;
    }
  }
}

Stackblitz Demo

本文标签： Unable to Apply CSS Styles to Angular Material maticon in Nested ComponentsStack Overflow