0

I am using Svelte, Bulma, and (trying to use) Ionicons. The icons do not render. I think it's due to my incorrect placement of the ionicons loading script.

My HTML is as follows:

<i class="ion-ionic add-circle-outline"></i>

The Ionicons script is below:

<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>

I'm not sure where the above script goes. I tried at the bottom of my App.svelte page but no luck. I also tried enclosing it in a tag.

Thank you!

ppedrazzi
  • 787
  • 2
  • 10
  • 23

3 Answers3

1

You shoud use next with bulma

<span class="ion-ionic">
<ion-icon name="add-circle-outline"></ion-icon>
</span>
Igor A. Melekhine
  • 813
  • 9
  • 9
0

I don't know where does your code come from, the official document says there is a specific usage.

<script src="https://unpkg.com/ionicons@5.1.2/dist/ionicons.js"></script>
<ion-icon name="add-circle-outline"></ion-icon>

https://ionicons.com/usage

zmag
  • 7,825
  • 12
  • 32
  • 42
  • With svelte-component you must add `` tags around ` ` – grohjy Sep 01 '20 at 04:30
  • 1
    @zmag Yes the code for bulma is a bit different than std usage in Ionic, thus the tag. – ppedrazzi Sep 01 '20 at 14:32
  • @grohjy - I put the script tag inside but no luck. The Ionicons docs say the src tag needs to be at the bottom of the body tag. Perhaps that's the issue? – ppedrazzi Sep 01 '20 at 14:33
  • font awesome works fine. Also, if I don't use bulma life is good too. Something with Bulma and ionicons. – ppedrazzi Sep 01 '20 at 15:13
0

The icon element is a container.

<span class="icon is-small has-text-link has-background-grey-lighter">
  <!-- Font Awesome 6 -->
  <i class="fa-sharp fa-regular fa-chevron-right"></i>

  <!-- Font Awesome 5 -->
  <i class="far fa-chevron-right"></i>

  <!-- Material Design Icons -->
  <span class="mdi mdi-chevron-right"></span>

  <!-- Ionicons -->
  <ion-icon name="chevron-forward-outline"></ion-icon>
</span>

Please specify the icon element outside.

bindi
  • 121
  • 2
  • 5