How do I increase the size of a radio button selection in AngularJS Material?

Question

I want to make the area where the click is detected bigger as shown in this image.

I want to make it so that no matter where you click inside that red region you will select the radio button.

I've managed to make that area selectable with the CSS style Padding:

$scope.myObj = {
  "padding": "20px",
}

The HTML looks like this:

    <md-radio-button ng-style="myObj"></md-radio-button>

But this creates another issue, I want the circle of the radio button to be centered inside that area, like this image.

Is there a way to center the radio button inside the region and keep the padding or is there any other way to increase the clickable area and keep the button centered?

Answer 1

You can do your own if you want, see example:

.btn-padding {
    background: lime;
    
    padding: 14px;
}

<md-radio-button ng-style="myObj" class="btn-padding">Write Text</md-radio-button>