How to style list

Styles from the material/list package can be customized using the list-overrides mixin. This mixin accepts a set of tokens that control how the components will look, either for the entire app or under a specific selector. For example:
@use '@angular/material' as mat;

// Customize the entire app. Change :root to your selector if you want to scope the styles.
:root {
  @include mat.list-overrides((
    active-indicator-color: orange,
    list-item-container-color: red,
  ));
}
You can find the full list of supported mixins and tokens below.

Tokens supported by list-overrides

NameTypeBased on system token
active-indicator-colorColor--mat-sys-secondary-container
active-indicator-shapeBase None
list-item-leading-icon-start-spaceDensity None
list-item-leading-icon-end-spaceDensity None
list-item-container-shapeBase None
list-item-leading-avatar-shapeBase None
list-item-container-colorColor None
list-item-selected-container-colorColor None
list-item-leading-avatar-colorColor--mat-sys-primary-container
list-item-leading-icon-sizeBase None
list-item-leading-avatar-sizeBase None
list-item-trailing-icon-sizeBase None
list-item-disabled-state-layer-colorColor--mat-sys-on-surface
list-item-disabled-state-layer-opacityColor None
list-item-disabled-label-text-opacityBase None
list-item-disabled-leading-icon-opacityBase None
list-item-disabled-trailing-icon-opacityBase None
list-item-label-text-colorColor--mat-sys-on-surface
list-item-supporting-text-colorColor--mat-sys-on-surface-variant
list-item-leading-icon-colorColor--mat-sys-on-surface-variant
list-item-trailing-supporting-text-colorColor--mat-sys-on-surface-variant
list-item-trailing-icon-colorColor--mat-sys-on-surface-variant
list-item-selected-trailing-icon-colorColor--mat-sys-primary
list-item-disabled-label-text-colorColor--mat-sys-on-surface
list-item-disabled-leading-icon-colorColor--mat-sys-on-surface
list-item-disabled-trailing-icon-colorColor--mat-sys-on-surface
list-item-hover-label-text-colorColor--mat-sys-on-surface
list-item-hover-leading-icon-colorColor None
list-item-hover-trailing-icon-colorColor None
list-item-focus-label-text-colorColor--mat-sys-on-surface
list-item-hover-state-layer-colorColor--mat-sys-on-surface
list-item-hover-state-layer-opacityColor None
list-item-focus-state-layer-colorColor--mat-sys-on-surface
list-item-focus-state-layer-opacityColor None
list-item-label-text-fontTypography--mat-sys-body-large-font
list-item-label-text-line-heightTypography--mat-sys-body-large-line-height
list-item-label-text-sizeTypography--mat-sys-body-large-size
list-item-label-text-trackingTypography--mat-sys-body-large-tracking
list-item-label-text-weightTypography--mat-sys-body-large-weight
list-item-supporting-text-fontTypography--mat-sys-body-medium-font
list-item-supporting-text-line-heightTypography--mat-sys-body-medium-line-height
list-item-supporting-text-sizeTypography--mat-sys-body-medium-size
list-item-supporting-text-trackingTypography--mat-sys-body-medium-tracking
list-item-supporting-text-weightTypography--mat-sys-body-medium-weight
list-item-trailing-supporting-text-fontTypography--mat-sys-label-small-font
list-item-trailing-supporting-text-line-heightTypography--mat-sys-label-small-line-height
list-item-trailing-supporting-text-sizeTypography--mat-sys-label-small-size
list-item-trailing-supporting-text-trackingTypography--mat-sys-label-small-tracking
list-item-trailing-supporting-text-weightTypography--mat-sys-label-small-weight
list-item-one-line-container-heightDensity None
list-item-two-line-container-heightDensity None
list-item-three-line-container-heightDensity None
Azure & Blue theme selected.