How to add arrow icons to expand and collapse any row in Angular Mat-Table with Expandable Rows?

Question

I have created a mat-table with expandable rows just like this one in Angular 8:

https://stackblitz.com/angular/pmagobelkkg?file=app%2Ftable-expandable-rows-example.ts

However, as in the example above, the row will only expand when I click somewhere within that row. Is there any way to add up and down arrow icons to each row, so that ONLY when I click on the icon in each row, the row will expand?

Thank you very much!

Answer 1

Here's the solution of your stackblitz. Forked stackblitz

Hope it helps!