Bulma and Ionicons

Question

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/[email protected]/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!

Answer 1

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

<script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>
<ion-icon name="add-circle-outline"></ion-icon>

https://ionicons.com/usage

Answer 2

You shoud use next with bulma

<span class="ion-ionic">
<ion-icon name="add-circle-outline"></ion-icon>
</span>

Answer 3

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.