<ion-radio> styling inner icon with the shadow dom, radio-inner

[osman144]

Bug Report

Ionic Info

Ionic:

   ionic (Ionic CLI)          : 4.1.2
   Ionic Framework            : @ionic/angular 4.0.0-beta.11
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.0
   @ionic/ng-toolkit          : 1.0.7
   @ionic/schematics-angular  : 1.0.5

Describe the Bug

Ion-radio contains

<div class="radio-icon">
     <div class="radio-inner"></div>
</div> 

within the shadow dom.

I'm able to style the outer icon within the ion radio using CSS variables.

But I'm unable to style the inner icon with the class name radio-inner. There doesn't seem to be a way to style this element even with CSS variables.

Steps to Reproduce
Steps to reproduce the behavior:

1. Launch the App

Related Code

<ion-radio-group>
    <ion-item lines="full">
          <ion-label>
               <ion-text>
                     <h3>Text</h3>
               </ion-text>
               <ion-text>Text</ion-text>
           </ion-label>
           <ion-radio mode="md" class="text-type-radio" checked="{{text.active}}"></ion-radio>
                    
    </ion-item>
</ion-radio-group> 

Expected Behavior
There should be a way to simply style this inner icon; even with CSS variables, I'm unable to do so.
Additional Context

The problem:

This is how ideally I would like it to look like:

[osman144]

@manucorporat Looks like you just added a fix, it will be available in the next update?

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.