1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.
  2. Anuncie Aqui
    Anuncie aqui você Também: fdantas@4each.com.br

Is it possible to style Mat-Checkbox to show an X instead of checkmark?

Discussão em 'Angular' iniciado por tiana, Novembro 24, 2025.

  1. tiana

    tiana Guest

    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...

Compartilhe esta Página