Reports

The problem was that when using fa icons the fill/color is set when page renders, the icon is switched for an SVG, so this:

<div @onclick:stopPropagation 
  class="@(Message.Flags.HasFlag(MessageFlags.Flagged) ? "flag-red" : "")"
  @onclick="@(async () => await HandleFlagClick(Message, MessageFlags.Flagged))" style="cursor: pointer;">
  <i class="fa fa-flag" ></i>
</div>

becomes:

<div class="" style="cursor: pointer;"><!--!--><svg class="svg-inline--fa fa-flag" aria-hidden="true" f..."></path></svg><!-- <i class="fa fa-flag"></i> Font Awesome fontawesome.com --></div>

I changed my CSS to target the fill

.flag-red *{
    fill: var(--error);
}

Now it works as expected.

Thank you all to point me to the right direction.

79480738