refactor: improve button component styles (#7517)

#### What type of PR is this?

/area ui
/kind improvement
/milestone 2.21.x

#### What this PR does / why we need it:

1. Add ghost variant
2. Improve icon style
3. Refactoring css using scss functions

#### Does this PR introduce a user-facing change?

```release-note
None
```

ui/console-src/modules/system/backup/Backups.vue

@@ -68,7 +68,7 @@ onMounted(async () => {
     <template #actions>
       <VButton type="secondary" @click="handleCreate">
         <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
         </template>
         {{ $t("core.backup.operations.create.button") }}
       </VButton>

ui/console-src/modules/system/overview/Overview.vue

@@ -200,7 +200,7 @@ const handleDownloadLogfile = () => {
     <template #actions>
       <VButton size="sm" @click="handleCopy">
         <template #icon>
-          <IconClipboardLine class="h-full w-full" />
+          <IconClipboardLine />
         </template>
         {{ $t("core.common.buttons.copy") }}
       </VButton>

ui/console-src/modules/system/plugins/PluginList.vue

@@ -169,7 +169,7 @@ onMounted(() => {
             @click="$router.push({ name: 'PluginExtensionPointSettings' })"
           >
             <template #icon>
-              <IconSettings class="h-full w-full" />
+              <IconSettings />
             </template>
             {{ $t("core.plugin.actions.extension-point-settings") }}
           </VButton>
@@ -181,7 +181,7 @@ onMounted(() => {
           @click="pluginInstallationModalVisible = true"
         >
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.common.buttons.install") }}
         </VButton>
@@ -314,7 +314,7 @@ onMounted(() => {
                 @click="pluginInstallationModalVisible = true"
               >
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.plugin.empty.actions.install") }}
               </VButton>

ui/console-src/modules/system/plugins/components/entity-fields/ReloadField.vue

@@ -38,7 +38,7 @@ function handleReloadWindow() {
 <template>
   <VButton v-if="needsReloadWindow" size="xs" @click="handleReloadWindow">
     <template #icon>
-      <IconInformation class="h-full w-full" />
+      <IconInformation />
     </template>
     {{ $t("core.plugin.operations.reload_window.button") }}
   </VButton>

ui/console-src/modules/system/roles/RoleList.vue

@@ -216,7 +216,7 @@ const handleDelete = async (role: Role) => {
         @click="editingModal = true"
       >
         <template #icon>
-          <IconAddCircle class="h-full w-full" />
+          <IconAddCircle />
         </template>
         {{ $t("core.common.buttons.new") }}
       </VButton>

ui/console-src/modules/system/users/UserList.vue

@@ -198,14 +198,14 @@ function onCreationModalClose() {
           type="default"
         >
           <template #icon>
-            <IconShieldUser class="h-full w-full" />
+            <IconShieldUser />
           </template>
           {{ $t("core.user.actions.roles") }}
         </VButton>
         <HasPermission :permissions="['*']">
           <VButton :route="{ name: 'AuthProviders' }" size="sm" type="default">
             <template #icon>
-              <IconLockPasswordLine class="h-full w-full" />
+              <IconLockPasswordLine />
             </template>
             {{ $t("core.user.actions.identity_authentication") }}
           </VButton>
@@ -216,7 +216,7 @@ function onCreationModalClose() {
           @click="creationModal = true"
         >
           <template #icon>
-            <IconAddCircle class="h-full w-full" />
+            <IconAddCircle />
           </template>
           {{ $t("core.common.buttons.new") }}
         </VButton>
@@ -326,7 +326,7 @@ function onCreationModalClose() {
                 @click="creationModal = true"
               >
                 <template #icon>
-                  <IconAddCircle class="h-full w-full" />
+                  <IconAddCircle />
                 </template>
                 {{ $t("core.common.buttons.new") }}
               </VButton>