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-icon name="add"></ion-icon>

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

export default {
  components: {

  methods: {
    reCenter() {
      console.log("Emitted reCenter");

    startAdd() {
      console.log("Emitted startAdd");

  setup() {
    return {

My App.vue:

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

    <menu-bar />

<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: {
    // IonRouterOutlet,
  data() {
    return {
      bankjes: null,
      dataReceived: false,

  mounted() {

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

Meanwhile I found the solution.

Instead of using

<ion-icon name="add">

I have to use

<ion-icon :icon="add">

Even though the Ionic documentation for IonFab says to do the first!

<ion-icon :icon="add"> is the correct usage. This is documented in the quickstart guide (Ionic Vue Quickstart - Ionic Documentation), but looks like we did not update the ion-fab example to document the correct ion-icon usage. I will put up a PR to fix this. Thanks!

edit: PR is up: docs(fab): document correct ion-icon usage for vue by liamdebeasi · Pull Request #23352 · ionic-team/ionic-framework · GitHub

It’s August 22, and the vue docs are still incorrect:

Come on guys


Hi @andrewpnlp3,

The documentation inaccuracy has been fixed: ion-button: Design and Style Buttons with Custom CSS Properties

If you find any other any other typos in the docs, definitely feel free to open issues or PRs on GitHub - ionic-team/ionic-docs.

1 Like