Можно ли стилизовать Mat-Checkbox так, чтобы вместо галочки отображался X? ⇐ Html

[Anonymous]

Пытаемся реализовать функциональность с помощью Angular Material , где, если пользователь нажимает кнопку «Да», отображается галочка. Если пользователь нажмет кнопку «Нет», он отобразит X. Думаю, официальное руководство Angular Material немного расплывчато в этом вопросе.
Я пробовал добавить новый svg «X» в качестве содержимого внутри класса mat-checkbox-background, но работает только с инкапсуляцией.
Я не могу добавить и глобально, потому что я использовал и в других компонентах. Я хочу, чтобы он применялся только к одному компоненту.

Код: Выделить всё

 .mat-checkbox-background{
content: url(/assets/icons/cancel_checkbox.svg) !important;
}

Пожалуйста, дайте несколько советов
Спасибо!
Примечание: не хочу использовать инкапсуляцию, поскольку она влияет на другие стили.>

Подробнее здесь: https://stackoverflow.com/questions/691 ... -checkmark