How can I display semantic elements on a Razor page, using conditions

Question

I would like to display the relevant icon based on the healthy condition. Please note, my issue is not the condition. My issue is I am getting the string returned, not the icon.

@{
   string successIcon = "<i class='fas fa-check-circle' style='color: #3fd421;'></i>";
   string failedIcon = "<i class='fas fa-times-circle' style='color: #e63737;'></i>";
}
    
<td class="lft">@(UserAccessHealth.Contains("Healthy") ? failedIcon : successIcon)  UserAccess:</td>

this is the returned, I want to get the icon as below, not the string

Answer 1

I guess the problem is based on format. You could try to pass your string as @Html.Raw(successIcon). However there is a simple alternative to this

Render depending on an If statement

@if(UserAccessHealth.Contains("Healthy"))
{
   <td class="lft"><i class="fas fa-check-circle" style="color: #3fd421;"></i> UserAccess:</td>
}
else
{
   <td class="lft"><i class="fas fa-times-circle" style="color: #e63737;"></i> UserAccess:</td>
}