Knockout JS: Conditional Switch Case

My current task is to replace knockout js conditional if to switch case(or like multiple if case) to check more than two conditions. The scenario is if the user is authenticated then the toggle icon should be visible in green color and for un authenticated user the toggle icon should be in grey color. Below is the code for the scenario I stated here, IsAuthenticatedUser() is a bool value always have true or false. Now I have to change the bool(0 1) value to flag(0 1 2 3) value.

Bool representation is, 
0 - Not Authenticated - grey icon
1 - Authenticated - green icon

Flag Value
0 - Not Authenticated - grey icon
1 - Authenticated - green icon
2 - Authenticated but expired - no icon
3 - Authenticated but not yet license period started - no icon

For bool value the Knockout JS conditional separation is like,

<!-- ko if: IsAuthenticatedUser() -->
<i class="fa fa-toggle-on faIcons green" title="Active"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

<!-- ko if: !IsNotAuthenticatedUser() -->
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

For Flag value, I have to do something like below,

<!-- ko if: UserFlag == 1 -->
<i class="fa fa-toggle-on faIcons green" title="Active"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

<!-- ko if: UserFlag == 0 -->
<i class="fa fa-toggle-on faIcons fa-rotate-180 toggleOff" title="Inactive"
   data-bind="click: function (data, event) { $parent.functiongoeshere }"></i>
<!-- /ko -->

<!-- ko if: UserFlag == 2 -->
<!-- No ICON -->
<!-- /ko -->

<!-- ko if: UserFlag == 2 -->
<!-- No ICON -->
<!-- /ko -->

But this is not working, So is there another way to use if for multiple condition checking or how we can user switch control to handle this scenario.

Any suggestion would be helpful.