Can't apply styles to Ionic radio button

Issue

I'm trying to move the icon of an Ionic radio button a few pixels upwards, but I'm unable to do so.

Here's the code for reference:

// HTML
<ion-radio class="radio-input" mode="md" slot="start" [value]="data"></ion-radio>

// SCSS
.radio-input {
  // this contains things irrelevant to the question
}

The class that seems to affect the part of the button I need is .radio-icon, but I'm unable to affect it on the component's stylesheet. Targeting the .radio-input class does nothing as it affects the entire thing, not just the button.

Hiding the element and using a "fake" radio input is not an option.

What would be the correct approach here?

Edit: the project is running on Ionic 6.

Solution

Ionic components are using shadow DOM, which means you CANNOT apply styles or CSS classes directly on them like native HTML elements.

To do so, back to their docs about this part, and I qoute:

To externally style internal elements of a Shadow DOM component you must use CSS Custom Properties or CSS Shadow Parts.

You need to take that into consideration, I don't now what exactly you wanna do, but for example:

ion-radio has 2 parts you can update, mark and container, you can change their styles by:

ion-radio::part(mark) {
    margin-bottom: 10px;
}

Answered By - Nimer Esam