How to programtically access built-in view property

There’s isActive property for ion-icon, I’d like to change it in ts code, here’s what I tried

# in template
<ion-icon #myIcon name="home"></ion-icon>

# in component 
@ViewChild("myIcon") myIcon;
...

onClick() {
  myIcon.isActive = true;
}

however it doesn’t work. I know I can bind a variable to isActive property, but I still want to know how to change view property in ts code.

I’m confused. You understand that all you have to do is to bind to isActive, and therefore you can solve your problem by simply changing whatever property that is bound to, but that’s not good enough and you’re futzing around with @ViewChild?

I was wondering if I can directly update view property

And I am wondering why modifying the bound backing property is insufficient.