fix(buttons): correct icon slots

app/components/layouts/default/NavBar/ParametersMenu/ParametersMenu.vue

@@ -7,9 +7,11 @@
       type="button"
       @click.prevent="onClickFromParametersButton"
     >
-      <FontAwesomeIcon
-        icon="gear"
-      />
+      <template #icon>
+        <FontAwesomeIcon
+          icon="gear"
+        />
+      </template>
     </PrimeVueButton>
 
     <PrimeVueMenu

app/components/pages/game-lobby/GameLobbyAdditionalCardsManager/GameLobbyAdditionalCardsManagerContent/RecipientRoleAdditionalCardsManager/RecipientRoleAdditionalCardsMultiSelect/RecipientRoleAdditionalCardsMultiSelect.vue

@@ -51,7 +51,9 @@
           :data-testid="`recipient-role-additional-cards-multi-select-remove-${value.roleName}-for-${recipientRoleName}`"
           @click.stop="onClickFromRemoveAdditionalCardButton(value)"
         >
-          <FontAwesomeIcon icon="times"/>
+          <template #icon>
+            <FontAwesomeIcon icon="times"/>
+          </template>
         </PrimeVueButton>
       </template>
     </PrimeVueMultiSelect>

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyRandomCompositionButton/GameLobbyRandomCompositionButton.vue

@@ -6,20 +6,19 @@
     <PrimeVueButton
       class="random-composition-button"
       :disabled="isButtonDisabled"
+      :label="buttonLabel"
       :loading="isLoadingGetRandomGameComposition"
       raised
       severity="secondary"
       :size="buttonSize"
       type="button"
       @click.prevent="onClickFromRandomCompositionButton"
     >
-      <FontAwesomeIcon
-        icon="random"
-      />
-
-      <span>
-        {{ buttonLabel }}
-      </span>
+      <template #icon>
+        <FontAwesomeIcon
+          icon="random"
+        />
+      </template>
     </PrimeVueButton>
   </div>
 </template>

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyStartGameButton/GameLobbyStartGameButton.vue

@@ -8,19 +8,18 @@
       id="game-lobby-start-game-button"
       class="!h-full !px-6 !py-4 start-game-button"
       :disabled="isButtonDisabled"
+      :label="$t('components.GameLobbyStartGameButton.startGame')"
       :loading="isLoadingCreateGame"
       raised
       size="large"
       type="button"
       @click.prevent="onClickFromStartGameButton"
     >
-      <FontAwesomeIcon
-        icon="play"
-      />
-
-      <span>
-        {{ $t("components.GameLobbyStartGameButton.startGame") }}
-      </span>
+      <template #icon>
+        <FontAwesomeIcon
+          icon="play"
+        />
+      </template>
     </PrimeVueButton>
 
     <GameLobbyStartGameConfirmDialog

app/components/pages/game-lobby/GameLobbyFooter/GameLobbyStartGameButton/GameLobbyStartGameConfirmDialog/GameLobbyStartGameConfirmDialogContainer/GameLobbyStartGameConfirmDialogFooter/GameLobbyStartGameConfirmDialogFooter.vue

@@ -5,37 +5,35 @@
     <div class="flex gap-2 items-center justify-between w-full">
       <PrimeVueButton
         id="cancel-button"
+        :label="$t('shared.actions.cancel')"
         severity="secondary"
         size="small"
         @click.prevent="onRejectStartGame"
       >
-        <FontAwesomeIcon
-          class="me-2"
-          icon="times"
-        />
-
-        <span id="cancel-button-text">
-          {{ $t("shared.actions.cancel") }}
-        </span>
+        <template #icon>
+          <FontAwesomeIcon
+            class="me-2"
+            icon="times"
+          />
+        </template>
       </PrimeVueButton>
 
       <PrimeVueButton
         id="confirm-button"
         class="!transition-all"
         :class="confirmButtonClasses"
+        :label="confirmButtonText"
         severity="secondary"
         size="small"
         @click.prevent="onConfirmStartGame"
       >
-        <FontAwesomeIcon
-          id="confirm-button-icon"
-          :class="confirmButtonIconAndClasses.iconClass"
-          :icon="confirmButtonIconAndClasses.icon"
-        />
-
-        <span id="confirm-button-text">
-          {{ confirmButtonText }}
-        </span>
+        <template #icon>
+          <FontAwesomeIcon
+            id="confirm-button-icon"
+            :class="confirmButtonIconAndClasses.iconClass"
+            :icon="confirmButtonIconAndClasses.icon"
+          />
+        </template>
       </PrimeVueButton>
     </div>
   </div>

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderAdditionalCardsManagerButton/GameLobbyHeaderAdditionalCardsManagerButton.vue

@@ -18,6 +18,7 @@
     <FontAwesomeIcon
       v-if="!areAdditionalCardsSetForAdditionalCardsDependantRoles"
       id="additional-cards-not-set-warning-icon"
+      beat
       icon="exclamation-circle"
     />
   </PrimeVueButton>

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderOptionsButton/GameLobbyHeaderOptionsButton.vue

@@ -1,18 +1,17 @@
 <template>
   <PrimeVueButton
     id="game-lobby-header-options-button"
+    :label="$t('components.GameLobbyHeaderOptionButton.gameOptions')"
     :pt="{ 'root': '!border-sky-600' }"
     severity="info"
     size="small"
     @click.prevent="onClickFromGameOptionsButton"
   >
-    <FontAwesomeIcon
-      icon="sliders"
-    />
-
-    <span>
-      {{ $t("components.GameLobbyHeaderOptionButton.gameOptions") }}
-    </span>
+    <template #icon>
+      <FontAwesomeIcon
+        icon="sliders"
+      />
+    </template>
   </PrimeVueButton>
 </template>
 

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyHeaderSetupButtons/GameLobbyHeaderPositionCoordinatorButton/GameLobbyHeaderPositionCoordinatorButton.vue

@@ -1,19 +1,18 @@
 <template>
   <PrimeVueButton
     id="game-lobby-header-position-coordinator-button"
+    :label="$t('components.GameLobbyHeaderPositionCoordinatorButton.positionCoordinator')"
     :pt="{ 'root': '!border-sky-600' }"
     severity="info"
     size="small"
     @click.prevent="onClickFromGamePositionCoordinatorButton"
   >
-    <FontAwesomeIcon
-      class="animate__animated animate__heartBeat animate__slow"
-      icon="users"
-    />
-
-    <span>
-      {{ $t('components.GameLobbyHeaderPositionCoordinatorButton.positionCoordinator') }}
-    </span>
+    <template #icon>
+      <FontAwesomeIcon
+        class="animate__animated animate__heartBeat animate__slow"
+        icon="users"
+      />
+    </template>
   </PrimeVueButton>
 </template>
 

app/components/pages/game-lobby/GameLobbyHeader/GameLobbyPlayerInput/GameLobbyPlayerInput.vue

@@ -24,14 +24,13 @@
       <PrimeVueButton
         id="add-player-button"
         :disabled="isAddButtonDisabled"
+        :label="$t('shared.actions.add')"
         severity="primary"
         type="submit"
       >
-        <FontAwesomeIcon icon="plus"/>
-
-        <span class="me-3">
-          {{ $t("shared.actions.add") }}
-        </span>
+        <template #icon>
+          <FontAwesomeIcon icon="plus"/>
+        </template>
       </PrimeVueButton>
     </PrimeVueInputGroup>
 

app/components/pages/game-lobby/GameLobbyPlayersParty/GameLobbyPlayerCard/GameLobbyPlayerCard.vue

@@ -13,10 +13,12 @@
       type="button"
       @click.prevent="onClickFromRemovePlayerButton"
     >
-      <FontAwesomeIcon
-        class="fa-2x"
-        icon="minus"
-      />
+      <template #icon>
+        <FontAwesomeIcon
+          class="fa-2x"
+          icon="minus"
+        />
+      </template>
     </PrimeVueButton>
 
     <PlayerCard

app/components/pages/game/GameOver/GameOverActions/GameOverActions.vue

@@ -7,17 +7,16 @@
 
     <PrimeVueButton
       id="show-game-history-button"
+      :label="showGameHistoryTextButton"
       :loading="!gameHistoryRecords.length"
       severity="help"
       @click="onClickFromShowHistoryButton"
     >
-      <FontAwesomeIcon
-        icon="clock-rotate-left"
-      />
-
-      <span>
-        {{ showGameHistoryTextButton }}
-      </span>
+      <template #icon>
+        <FontAwesomeIcon
+          icon="clock-rotate-left"
+        />
+      </template>
     </PrimeVueButton>
   </div>
 </template>

app/components/pages/game/GameOver/GameOverActions/GameOverCreateNewGameButton/GameOverCreateNewGameButton.vue

@@ -27,16 +27,14 @@
       id="create-new-game-button"
       ref="createNewGameButton"
       class="p-button p-button-raised"
+      :label="$t('components.GameOverActions.createAnotherGame')"
       @click="onClickFromCreateNewGameButton"
     >
-      <FontAwesomeIcon
-        class="me-2"
-        icon="play-circle"
-      />
-
-      <span id="create-new-game-button-text">
-        {{ $t('components.GameOverActions.createAnotherGame') }}
-      </span>
+      <template #icon>
+        <FontAwesomeIcon
+          icon="play-circle"
+        />
+      </template>
     </PrimeVueButton>
   </div>
 </template>

app/components/pages/game/GamePlaying/GamePlayground/GamePlaygroundFooter/GamePlaygroundFooterMakePlayButton/GamePlaygroundFooterMakePlayButton.vue

@@ -8,19 +8,18 @@
       id="make-play-button"
       class="uppercase w-full"
       :disabled="isButtonDisabled"
+      :label="$t('components.GamePlaygroundFooterMakePlayButton.makePlay')"
       :loading="isLoadingMakePlay"
       raised
       severity="primary"
       type="button"
       @click.prevent="onClickFromMakePlayButton"
     >
-      <FontAwesomeIcon
-        icon="play"
-      />
-
-      <span>
-        {{ $t("components.GamePlaygroundFooterMakePlayButton.makePlay") }}
-      </span>
+      <template #icon>
+        <FontAwesomeIcon
+          icon="play"
+        />
+      </template>
     </PrimeVueButton>
   </div>
 </template>