How can I change the font-awesome icons ?

[TudorPetrariu]

First, congratulations on your awesome work! I really like this package and I intend to use it in my project with some real data, however I have some troubles changing the icons.

This is my pagination component

<template>
    <div>
    <VueAdsPagination
      :total-items="200"
      :max-visible-pages="5"
      :page="page"
      :loading="loading"
      @page-change="pageChange"
      @range-change="rangeChange"
    >
      <template slot-scope="props">
        <div class="pr-2 leading-loose">
          Items {{ props.start }} tot {{ props.end }} van de {{ props.total }}
        </div>
      </template>
      <template
        slot="buttons"
        slot-scope="props"
      >
        <VueAdsPageButton
          v-for="(button, key) in props.buttons"
          :key="key"
          v-bind="button"
          @page-change="page = button.page"
        />
      </template>
    </VueAdsPagination>
  </div>
</template>

<script>

export default {
  name: 'VueAdsPagination',

  data () {
    return {
      loading: false,
      page: 5
    }
  },

  methods: {
    pageChange (page) {
      this.page = page
      console.log(page)
    },

    rangeChange (start, end) {
      console.log(start, end)
    }
  }
}
</script>

And here is my VueAdsPageButton component

`  <template>
  <button
    :class="buttonClasses"
    :disabled="disabled"
    :title="title"
    @click="pageChange"
  >
    <i v-if="loading" class="fa fa-spinner fa-spin" />
    <span v-else v-html="html" />
  </button>
</template>

<script>
export default {
  name: 'VueAdsPageButton',
  props: {
    page: {
      type: [Number, String],
      required: true
    },
    active: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    html: {
      type: String,
      required: true
    },
    title: {
      type: String,
      default: ''
    },
    loading: {
      type: Boolean,
      default: false
    },
    disableStyling: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    buttonClasses () {
      if (this.disableStyling) {
        return {}
      }
      return {
        'focus:outline-none': true,
        'ml-1': true,
        'leading-normal': true,
        'w-6': true,
        'bg-green-500': this.active,
        'text-white': this.active,
        'cursor-default': this.active || this.disabled,
        'bg-gray-200': this.disabled && this.page !== '...',
        'text-gray': this.disabled && this.page !== '...',
        'hover:bg-gray-100': !this.active && !this.disabled
      }
    }
  },
  methods: {
    pageChange () {
      if (this.page === '...' || this.disabled || this.active) {
        return
      }
      this.$emit('page-change')
    }
  }
}
</script>

I get the beauty as you can see it and I would like to use my own arrows, or 'next'-'prev', but I just don't understand how to customize.

Could you please give me an example ? Thank you!