Radio | Is there a way how to align an icon horizontally using just props, without styles

Question

Is there a way how to align an icon horizontally using just props, without styles

Code - https://codesandbox.io/s/smoosh-hill-nr230p?file=/src/App.js:113-349

There you go:

export default function App() {
    return (
        <div className="App">
            <Radio
                label="I cannot be unchecked"
                // How to align horizontally?
                icon={() => <IconAdjustments size={18} color='red'/>}
            />
        </div>
    );
}

Answer 1

icon property is used to change the icon of the Radio button itself. If you want to add icon to the label, you should use:

<Radio
    label={
        <>
            <IconAdjustments size={14} color="red" />
            I cannot be unchecked
        </>
    }  
/>

Edit:

As for now it is still not clear what you want to achieve after all, so here are all the possible scenarios.

1. If you want icon in the label => the solution above.
2. If you want to change the icon in the radio button itself:

• You either provide the icon element itself => icon={IconAdjustments} or..
• You provide a react component that accepts className as a property and applies it to the returned element:

icon={({ className }) => (
    <IconAdjustments className={className} color="red" />
)}

Passing size to the tabler icon element won't work for you as size is calculated internally based on the size of the Radio button and fixed width and height are applied to the icon.