Angular Material Change Theme Color of <mat-list-option> checkbox

Question

Is it possible to change the color of the checkbox using the material theme? For example, with a normal you can simply do <mat-checkbox color="primary">. However something like <mat-list-option color="primary"> does not seem to have any effect.

I couldn't find anything about this in the Angular Material API reference but surely there's a way besides changing the color manually (i.e. not using the theme) like in this question?

MatListOption doesn't use the color option. So the only way to change color is 'manually'. — G. Tranter
– G. Tranter, Commented Sep 6, 2018 at 21:27
This component is really not mature, not only it doesn't play nice with angular theming system, but also it does not offer any state indicator (like .mat-checkbox-checked or .mat-radio-checked) at the option level. This make it really hard to style, if you can use mat-radio or mat-checkbox instead pass your way. — Nicolas Reynis
– Nicolas Reynis, Commented Jan 18, 2019 at 15:01

Juan · Accepted Answer · 2018-09-07 06:28:40Z

3

Check this StackBlitz: Custom option list

Add this to your style.css file:

.mat-pseudo-checkbox::after {
    color: red;
}

.mat-pseudo-checkbox {
    background: lightblue;
}

answered Sep 7, 2018 at 6:28

Juan

2,0743 gold badges20 silver badges38 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular Material Change Theme Color of <mat-list-option> checkbox

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related