如何在Ionic-Angular中动态改变图标颜色？

import { Component, Renderer2 } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
import { IonIconRegistry } from '@ionic/angular';

constructor(
  private ionIconRegistry: IonIconRegistry,
  private renderer: Renderer2,
  private sanitizer: DomSanitizer
) { }

ngOnInit() {
  this.ionIconRegistry.addSvgIcon(
    'custom-icon',
    this.sanitizer.bypassSecurityTrustResourceUrl('assets/icons/custom-icon.svg')
  );
}

changeIconColor(color: string) {
  const icon = document.querySelector('ion-icon[name="custom-icon"]');
  this.renderer.setStyle(icon, 'color', color);
}

<ion-icon name="custom-icon" (click)="changeIconColor('red')"></ion-icon>