Change the icon for mat-radio-button

user_13096377 0
Viewed 1815

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 :

enter image description here

angularjs-directive angular-material angular html
1 Answers

Don't think this is the most elegant solution but it does the job.

  1. In my case I'm using Angular 10 (2+) with all the ::ng-deep stuff so align the code for your needs.
  2. 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.

user_24714970
Related