help(mat-radio-button): I can't use `color` attribute in the <mat-radio-button>

What are you trying to do?

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="1" color="primary">Option 1</mat-radio-button>
  <mat-radio-button value="2" color="accent">Option 2</mat-radio-button>
  <mat-radio-button value="3" color="warn">Option 3</mat-radio-button>
  <mat-radio-button value="4" color="info">Option 4</mat-radio-button>
</mat-radio-group>

I want to create a custom material theme and use info theme palette like below. <mat-radio-button value="4" color="info">Option 4</mat-radio-button>

What troubleshooting steps have you tried?

For the other components like button, toggle, checkbox, I can use color=“info” palette.

<mat-radio-button value="4" color="info">Option 4</mat-radio-button>

I expect mat-info class in the <mat-radio-button>, but not working 😦

<mat-radio-button _ngcontent-csm-c296="" class="mat-radio-button example-radio-button mat-radio-checked" ng-reflect-value="Winter" id="mat-radio-2">
 ...
 ...
</mat-radio-button>

Reproduction

Steps to reproduce: https://material.angular.io/components/radio/examples you can add color=“info” in the <mat-radio-button>

<mat-radio-group aria-label="Select an option">
  <mat-radio-button value="1" color="primary">Option 1</mat-radio-button>
  <mat-radio-button value="2" color="accent">Option 2</mat-radio-button>
  <mat-radio-button value="3" color="warn">Option 3</mat-radio-button>
  <mat-radio-button value="4" color="info">Option 4</mat-radio-button>
</mat-radio-group>

Environment

• Angular: v13
• CDK/Material: v13
• Browser(s): Chrome
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

These palettes aren’t in the Material Design specification which we need to adhere to though. Also there’s nothing stopping you from defining your own color directive that accepts any color:

@Directive({
  selector: '[color]'
})
class ColorDirective {
  @Input()
  set color(value: string) {
    if (this._color) {
      this._elementRef.nativeElement.classList.remove(`mat-${this._color}`);
    }

    this._color = value;
    this._elementRef.nativeElement.classList.add(`mat-${value}`);
  }
  private _color: string;

  constructor(private _elementRef: ElementRef<HTMLElement>) {}
}

[Totati]

Duplicate of #11888