Dev Stack Source

Answer : My final test ended up looking like this: import { TestBed, async, ComponentFixture } from '@angular/core/testing'; import { AppComponent } from './app.component'; import { RouterTestingModule } from '@angular/router/testing'; import { AppRoutes } from './app.routes'; import { MatToolbarModule, MatIconModule, MatMenuModule, MatButtonModule } from '@angular/material'; import { HomeComponent } from './home/home.component'; import { UserService } from './user/user.service'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { BehaviorSubject } from '../../node_modules/rxjs'; class MockUserService { signedIn$: BehaviorSubject<boolean> = new BehaviorSubject(false); signIn() {} } describe('AppComponent', () => { let app: AppComponent; let fixture: ComponentFixture<AppComponent>; let dom; let button; beforeEach(async(() => ...

Answer : You can use aria-selected="true" attribute from mat-list-option tag to target the selected option, and provide corresponding css properties for the same. mat-list-option[aria-selected="true"] { background: rgba(0, 139, 139, 0.7); } Stackblitz Working Demo The accepted answer works fine, but it uses a hardcoded color value ( background: rgba(0, 139, 139, 0.7) ). This approach will actually break your styles and colors if you decide to switch to another pre-build material theme or use a custom theme (as described in Theming your Angular Material app page). So, if you use SCSS, you can use the following code in your component's style file: @import '~@angular/material/theming'; mat-list-option[aria-selected="true"] { background: mat-color($mat-light-theme-background, hover, 0.12); } The above code is adapted from mat-select options - in this way, you will have a consistent look in the entire app: .mat-option.mat-s...