Ion-icon not visible on ion-fab-button

I am building a simple map app with Vue, Leaflet and Ionic. I want to have a fixed button with an icon on it. I am using ion-fab in combination with ion-icon. But whatever I try, the icon is not visible on the button. Hope someone can tell me what I am doing wrong.

The vue component (Menubar.vue):

<template >
  <!-- fab placed to the top end -->
  <ion-fab vertical="top" slot="fixed">
    <ion-fab-button>
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>  
  </ion-fab>
</template>

<script>
import { IonFab, IonFabButton, IonIcon } from "@ionic/vue";
import { eventHub } from "../main";
import { add } from "ionicons/icons";


export default {
  components: {
    IonFab,
    IonFabButton,
    IonIcon,
  },

  methods: {
    reCenter() {
      console.log("Emitted reCenter");
      eventHub.emit("reCenter");
    },

    startAdd() {
      console.log("Emitted startAdd");
      eventHub.emit("startAdd");
    },
  },

  setup() {
    return {
      add,
    };
  },
};
</script>

My App.vue:

<template>
  <ion-app>
    <ion-content>
    
    <!-- <ion-router-outlet /> -->
    <front-page :bankjes="bankjes" v-if="dataReceived"></front-page>

    <menu-bar />
    </ion-content>
  </ion-app>
</template>

<script >
// import { IonApp, IonRouterOutlet } from '@ionic/vue';
import { IonApp,IonContent } from "@ionic/vue";
import { defineComponent } from "vue";
import FrontPage from "./components/FrontPage";
import MenuBar from "./components/MenuBar.vue";


const axios = require("axios");

export default defineComponent({
  name: "App",
  components: {
    IonApp,
    // IonRouterOutlet,
    FrontPage,
    MenuBar,
    IonContent
  },
  
  data() {
    return {
      bankjes: null,
      dataReceived: false,
    };
  },

  mounted() {
    this.refreshDataFromServer();
  },

  methods: {
    refreshDataFromServer() {
      axios.get("http://localhost:3000/bankjes").then((response) => {
        this.bankjes = response.data;
        this.dataReceived = true;
      });
    },
  },
});
</script>

2 posts - 1 participant

Read full topic