tree view table change font awesome color - css

Question

I have a treeview where you click fa-plus-square-o and when it expands fa-minus-square-o shows.
I am using ng-class to show them. What I need to do is change that fa-minus-square-o color to white. However, I do have another page with the same type of treeview. So referencing the fa-minus-square-o directly in the CSS WORKS, but also "changes" the one on the other page. So, I cant do this!!!!. I need it to only affect the current one on that pages treeview.
HTML Table Treeview
<table class="users-tree-view-table">
<tbody class="users-tree-view-tbody">
<tr ng-repeat="user in users" ng-class="{selectedUserRole: user === selectedUser}">
<td class="users-tree-view-column">
<div class="users-tree-view-row">
<span class="fa users-tree-view-toggle" ng-class="{'fa-plus-square-o' : user.isUserCollapsed, 'fa-minus-square-o' : !user.isUserCollapsed}" ng-click="clickedUserNode(user); user.isUserCollapsed = !user.isUserCollapsed"></span>
{{user.userName}}
</div>
<div uib-collapse="user.isUserCollapsed">
<table class="users-tree-view-subtable">
<tbody class="users-tree-view-tbody">
<tr id="role-{{$index}}" ng-repeat="role in user.userRoles" ng-click="setSelectedUserRole(user, role)" ng-class="{true: 'selectedUserRole', false: 'unselectedUserRole'}[user === selectedUser && role === selectedRole]">
<td class="users-tree-view-column">
<div >
<div class="users-tree-view-row">
<span style="padding-left:45px">{{role}}</span>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
Hovering over the fa-minus-square-o I see I need to reference fa users-tree-view-toggle fa-minus-square-o somehow in the CSS?
How can I reference that one particular font awesome without affecting all the other font awesome on other pages?