icon.vue

<template>
  <ion-page>
    <ion-header :translucent="true">
      <ion-toolbar>
        <ion-title>Blank</ion-title>
      </ion-toolbar>
    </ion-header>

    <ion-content class="ion-padding">
      <h1>THE LOGIN PAGE</h1>
      <ion-loading :is-open="isLoading" message="Please wait..."> </ion-loading>
      <ion-button @click="doLogin">
        <ion-icon :icon="addOutline"></ion-icon>LOGIN</ion-button
      >

      <ion-button icon-only>
        <ion-icon :icon="-1 < 0 ? addCircleSharp : search" />
      </ion-button>
    </ion-content>
  </ion-page>
</template>

<script lang="ts">
import {
  IonContent,
  IonHeader,
  IonPage,
  IonTitle,
  IonToolbar,
  IonButton,
  IonLoading,
} from "@ionic/vue";
import { addOutline, addCircleSharp, search } from "ionicons/icons";
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";

export default defineComponent({
  name: "LoginPage",
  components: {
    IonContent,
    IonHeader,
    IonPage,
    IonTitle,
    IonToolbar,
    IonButton,
    IonLoading,
  },
  setup() {
    const router = useRouter();

    const isLoading = ref<boolean>(false);

    const doLogin = async () => {
    };
    return {
      router: useRouter(),
      doLogin,
      isLoading,
      addOutline,
      search,
      addCircleSharp,
    };
  },
});
</script>

<style scoped>
</style>