Change the icon for mat-radio-button - html

Question

How could I change the mat-radio-button to check-mark and cross-mark looks like following?
Thank you!
My code is here:
<mat-radio-group class="radio" (change)="onChange($event)"
name="exemplars">
<mat-radio-button class="radio-custom" [value]="true" [checked]="function()"> Accept </mat-radio-button>
<mat-radio-button class="radio-custom" [value]="false" [checked]="function()"> Reject</mat-radio-button>
</mat-radio-group>
icons I want to use :

Answer 1

Don't think this is the most elegant solution but it does the job.
In my case I'm using Angular 10 (2+) with all the ::ng-deep stuff so align the code for your needs.
I'm using an icomoon font with the icons my company is using so take this into consideration when applying this solution.
In my app.component. styling file:
::ng-deep {
.mat-radio-button {
.mat-radio-container {
.mat-radio-outer-circle:before {
font-family: "icomoon" !important; // here comes the icomoon font reference that defines the actual icon to be shown
content: "\e901"; // the code of the icon from my iconfont => change this one to the X icon of yours
position: absolute; // this and next 3 lines are for centering the icon in the circle of the radio button
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.mat-radio-inner-circle {
/* feel free to design the actual inner radiobutton circle as you wish*/
}
}
.mat-radio-button .mat-radio-checked {
.mat-radio-container {
.mat-radio-outer-circle:before {
content: "\e900"; // the code of the icon from my iconfont => change this one to V icon of yours
}
}
}
}
}
Feel free to enhance the code with all other stuff: sizes, borders, coloring, etc.

Answer 2

Create a new directive that binds to mat-radio-button or any other selector you need, e.g. mat-radio-button.radio-custom
Inject ElementRef into the directive's constructor
Use the instance of ElementRef to find .mat-radio-inner-circle
Set the innerHTML of the found html element to the svg of your desired icon.
Example:
#Directive({
selector: 'mat-radio-button',
})
export class CustomRadioButton implements OnInit {
constructor(private elementRef: ElementRef) {}
ngOnInit() {
this.appendIcon();
}
appendIcon() {
const innerCircle = this.elementRef.nativeElement.querySelector('.mat-radio-inner-circle');
innerCircle.innerHTML = YOUR_SVG_CODE;
}
}