Angular 2 Binding same click event to multiple elements

I have iconCheck: string; in my component export class then inside constructor I have this.iconCheck = "add_circle"; and in my export class I have

iconChange() {
    if(this.iconCheck == "add_circle") {
      this.iconCheck = "remove_circle"
    } else {
      this.iconCheck = "add_circle";
    }
  }

Now I have mulitple collapsible/expandable in my HTML for which I am using Bootstrap accordions. The above I am using the the +/- icon toggle. For example for the first time all the accordions are closed and have + icons but when I click on any so that should open and icon should be changed to (-). Now the problem I have with above typescript code is that when I click on any of the accordion all other accordions icons are also changing to the (-) icon. I need to find a way to bind the click event to that specific one which I clicked. I am not sure what are the right words for that and how to explain but in other I need a scope limit or as I said binding the click event to that specific clicked element. Here is my HTML:

<a data-toggle="collapse" (click)="iconChange()" href="#collapse1">
 Property 1 
 <i class="material-icons pull-right">{{iconCheck}}</i>
</a> 

<a data-toggle="collapse" (click)="iconChange()" href="#collapse2">
 Property 1 
 <i class="material-icons pull-right">{{iconCheck}}</i>
</a>