Angular MaterialのRadio Button、CheckBox、Sliderの色を個別に変更する

Angular MaterialのRadio Buttonの色を変更するCSSを以下に記述する

CSS(Radio Buttonの色を指定)

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  opacity: 0 !important;
  background-color: #0caccd !important;
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: #0caccd !important;
}

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
  border-color: #0caccd !important;
}

CSS(CheckBoxの色を指定)

.mat-checkbox-checked.mat-accent .mat-checkbox-background,
.mat-checkbox-indeterminate.mat-accent .mat-checkbox-background {
  background-color: #0caccd !important;
}

CSS(Sliderの色を指定)

.mat-accent .mat-slider-thumb,
.mat-accent .mat-slider-thumb-label,
.mat-accent .mat-slider-track-fill {
  background-color: #0caccd !important;
}

.mat-accent .mat-slider-thumb {
  background-color: #0caccd !important;
}

.mat-accent .mat-slider-thumb-label {
  background-color: #0caccd !important;
}

.mat-accent .mat-slider-track-fill {
  background-color: #0caccd !important;
}

上記の#0caccdの箇所に希望の色を指定すればOK