[joy-ui][Radio] Can't use a checked icon/unchecked icon when setting a background color

Steps to reproduce

Link to live example: (required)

Steps:

1. Create a radio group that contains radios with disableIcon set and slotProps that change the background color of the action component when the radio is checked. e.g. This example from the docs
2. See that it's possible to select the different options, the background color changes, and the label text is still visible.
3. Remove the disableIcon prop and pass a checkedIcon and/or uncheckedIcon prop with a random icon from @mui/icons-material.
4. See that the background color of a selected radio hides the icon and label.

Current behavior

The label and icon are hidden when the option is selected.

https://github.com/mui/material-ui/assets/1231200/59b99689-359f-4921-9963-18de4f04b017

Expected behavior

The label and icon should remain visible when the option is selected.

Context

Create a radio button group with options that change background color when selected and include icons.

Your environment

System:
    OS: macOS 14.4.1
  Binaries:
    Node: 21.7.3 - ~/.asdf/installs/nodejs/21.7.3/bin/node
    npm: 10.5.0 - ~/.asdf/plugins/nodejs/shims/npm
    pnpm: 9.0.1 - /opt/homebrew/bin/pnpm
  Browsers:
    Chrome: 124.0.6367.62
    Edge: Not Found
    Safari: 17.4.1
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/joy: 5.0.0-beta.36 => 5.0.0-beta.36 
    @mui/material: ^5.15.15 => 5.15.15 
    @types/react: ^18.2.79 => 18.2.79 
    react: ^18.2.0 => 18.2.0 
    react-dom: ^18.2.0 => 18.2.0 
    typescript: ^5.4.5 => 5.4.5 

Tested in Chrome, Safari, and Firefox

Search keywords: radio background color icon