I am a designer that is helping out devs with styling and I am trying to figure out how to switch an icon out when the filter is enabled. I cannot for the life of me figure this out.

<PVButton
            v-tooltip.top="'Sort in Ascending Order'"
            :text="viewSize === 'small'"
            :icon="sortOrder ? 'pi pi-sort-alpha-down iconButton' : 'pi pi-sort-alpha-down-alt iconButton'"
            :class="sortOrder > 0 ? activeSortClass : ''"
            class="px-0 compactButton"
            @click="toggleSortOrder"
          />

So I want to swap pi-sort-alpha-down w/ pi-sort-alpha-down-alt when the filter is active. What am I doing wrong here?

​

So after fighting to figure it out I was able to work with a dev and this was the solution, my sortOrder wasn't set in the icon line:

:icon="sortOrder > 0 ? 'pi pi-sort-alpha-down sortButton' : 'pi pi-sort-alpha-down-alt sortButton'"

​