Trying to implement a functionality using Angular Material <mat-checkbox> where if the user clicks on a Yes Button, it shows a checkmark. If the user clicks No Button, it would show an X. I find Angular Material official guide a little vague on this I guess. I have tried adding new 'X' svg as content inside mat-checkbox-background class but only works with encapsulation. I can not add in global as well because I have used <mat-checkbox> in other components too.I only want it to apply to one component. .mat-checkbox-background{ content: url(/assets/icons/cancel_checkbox.svg) !important; } Please give some suggestions Thanks! Note: do not want to use encapsulation as it affects Other styles. Continue reading...