technically, as long as all of the corresponding abbreviations are on it, you can just use the same field for multiple different options. so like.

<i class="fa-solid fa-<!-- |field_1| --> cp cp-<!-- |field_1| -->"></i>

that should work with both fontawesome and cappuccicons, and you can add more on for it to work in the same way

If you're still wondering how to go the group icon route, one option is including the icons for all the groups in your HTML but setting them as display: none, wrapping them inside a div, and then targeting which icon to show based on the div's class. The HTML might look something like this:

<div class="group-icon <!-- |group| -->">
<i class="cp cp-A"></i>
<i class="cp cp-B"></i>
<i class="cp cp-C"></i>
</div>
And the CSS
.group-icon i {
display: none;
}
.groupA .cp-A,
.groupB .cp-B,
.groupC .cp-C {
display: block;
}
That way, if an account is in groupA, it'll show the <i class="cp cp-A"></i> element, but none of the others. <!--|group|--> is interchangeable with <!--|field_#|--> too of course

---

A second option is wrapping them each individually in a div, and targeting which div to show rather than which icon 

<div class="group-icon <!-- |group| -->"><i class="A"></i></div>
<div class="group-icon <!-- |group| -->"><i class="B"></i></div>
<div class="group-icon <!-- |group| -->"><i class="C"></i></div>
<div class="group-icon <!-- |group| -->"><i class="D"></i></div>
Modified CSS
.group-icon {
display: none;
}
.group-icon:where(.groupA, .groupB, .groupC) {
display: block;
}

This version might be messier in terms of HTML, but the CSS has less to keep track of because you don't need to remember which icon corresponds to which group. Up to you which you prefer.