Ionic Icons not working

Ionic Framework Ionic Vue
1

I can’t seem to get the component to work. I tried following other solutions online, but none of them seemed to work. Only when I put an icon in a component, I get the icon to show.

Here is what my component looks like:

<template>
  <base-layout page-title="Dashboard">
    <div id="contentSlot">
      <div class="card" id="scheduled">
        <ion-icon
          class="menuIcon"
          :icon="bookmarkOutline">
        </ion-icon>
        <h3 class="menuTitle">Scheduled</h3>
      </div>
      <div class="card" id="completed">
        <ion-icon
          class="menuIcon"
          :icon="checkmarkCircle">
        </ion-icon>
        <h3 class="menuTitle">Completed</h3>
      </div>
      <div class="card" id="base">
        <ion-icon
          class="menuIcon"
          :icon="appsSharp">
        </ion-icon>
        <h3 class="menuTitle">Knowledge base</h3>
      </div>
      <div class="card" id="settings">
        <ion-icon
          class="menuIcon"
          :icon="settingsSharp">
        </ion-icon>
        <h3 class="menuTitle">Settings</h3>
      </div>
    </div>
  </base-layout>
</template>

And the script:

<script>
import {
  bookmarkOutline,
  checkmarkCircle,
  appsSharp,
  settingsSharp
} from 'ionicons/icons';

import {
  IonIcon
} from '@ionic/vue';

import { defineComponent } from 'vue';

export default defineComponent({
name: 'DashBoard',
components: { IonIcon },
setup() {
  return {
    bookmarkOutline,
    checkmarkCircle,
    appsSharp,
    settingsSharp
  };
},
});
</script>

I’m not sure if I’m doing it wrong or if some changes happened.
Thanks for the help in advance!

2

Are you getting an error? It’s something not displaying? Can you please be more specific with what is wrong with what you see?

3

Thank you for your response, I should’ve added a screenshot. Here is the output:

image
image375×555 9.3 KB

I have a header and footer with a toolbar, there I have some icons, embedded in components:

<ion-buttons id="headerButtons" slot="end">
          <ion-button>
            <ion-icon :icon="notifications"></ion-icon>
          </ion-button>
          <ion-button>
            <ion-icon :icon="settings"></ion-icon>
          </ion-button>
        </ion-buttons>

Using this method, it works:
Schermafbeelding 2023-08-29 154151

Hope this helps!

4

What you have in your OP is how I do it in Vue. Is that working for you or are you saying it is not?

Using

<ion-icon
      class="menuIcon"
      :icon="checkmarkCircle">

and

setup() {
  return {
    checkmarkCircle,
  };
},
5

This is not working for me. There should be icons above the text on every card in the screenshot I replied to dolthead.

6

I think we’d need a reproduction on StackBlitz to help.

7

Yes, we do need to see more code. Please show the code for the cards, since that is where your icons are not showing, as expected.