How can I change the icon image on a block/unblock button based on the user's active status? For example, showing an unlock image when the user is active and vice versa.
Image
https://i.stack.imgur.com/aM0ff.png
Html
<link href="../../font-awesome-4.6.3/css/font-awesome.min.css" rel="stylesheet" />
<h1>User View </h1>
<div class="row">
<div class="panel panel-default">
<div class="table-responsive">
<table class="table table-striped table-bordered">
<thead>
<tr>
<th class="text-center">First Name</th>
<th class="text-center">Last Name</th>
<th class="text-center">Email</th>
<th class="text-center">Status</th>
<th class="text-center">Block/Unblock</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let user of _data | paginate: { itemsPerPage: 10, currentPage: p }">
<th>{{user.FirstName}}</th>
<th>{{user.LastName}}</th>
<th>{{user.Email}}</th>
<th>{{ user.IsActive == true ? 'Active' : 'Block' }}</th>
<th>
<div class="text-center">
<button type="button" class="btn btn-xs " (click)="approvalPendingRequest(user.SubscriptionId)">
<i class="fa fa-unlock" aria-hidden="true"></i>
</button>
</div>
</th>
</tr>
</tbody>
</table>
<pagination-controls (pageChange)="p = $event" #api></pagination-controls>
</div>
</div>
</div>