Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Specifying the --spinner-color has no effect on a 'circular' spinner. All other spinner shapes work as expected.

Expected Behavior

Spinner color should respect defined custom color

Steps to Reproduce

In an Angular 13 project add a spinner.

I am running Angular 13.3 but if the issue is due to the naming I mentioned in additional Info below then I expect this issue is not framework specific

const loader = await this.loadingController.create({
          spinner: 'circular',
          cssClass: 'my-spinner'
        });

// CSS
.my-spinner {
  --spinner-color: red;
}

Code Reproduction URL

No response

Ionic Info

Ionic:

Ionic CLI : 6.18.2

Utility:

cordova-res : not installed globally
native-run : not installed globally

System:

NodeJS : v16.14.0
npm : 8.3.1
OS : macOS Monterey

Additional Information

Should this line not be named 'circular' instead of 'circle'?