Is it possible to update the checkbox color and text color based on certain conditions? Currently, my output shows that the checkbox is checked but the check icon is hidden. I would like the check mark to be visible when the checkbox is checked, and also change the text color from white to black. Thank you for your help.
#current output https://i.sstatic.net/uDJJI.png
#my target design (it should look like this) https://i.sstatic.net/YMSG8.png
<div *ngFor="let subtenant of currentSubtenants; let i = index;" class="subtenant-form-btn-group" [ngClass]="{'v-bg-color': currentSelectedTenants(subtenant)}">
<div class="deal-form-btn-group-radio">
<div class="pharmacy-checkbox">
<mat-checkbox
color="accent"
[(ngModel)]="dealDispositionFormFields.currentSubtenants"
[checked]="currentSelectedTenants(subtenant)"
(change)="changeCurrentSubtenants($event,subtenant)"
style="margin-left:10px;">
<mat-label class="subtenant-label" style="color:rgba(0, 0, 0, 0.87)">{{subtenant.subtenantName}}</mat-label>
</mat-checkbox>
</div>
</div>
<div >
<div class="flex-column">
<mat-label class="subtenant-label">Current Lease Expiration</mat-label>
<div class="subtenant-label">{{subtenant.currentLeaseExpiration}}</div>
</div>
</div>
</div>