You can achieve this by simply adding native modifier to your click event. By default cursor over an icon element won't change to pointer so you need to add css style.

<template>
      <mdb-icon @click.native="handleClick" icon="calendar-check" class="clickable-icon"/>
</template>

<script>
import { mdbIcon } from 'mdbvue';
export default {
  components: {
    mdbIcon
  },
  methods: {
    handleClick() {
      console.log('clicked');
    }
  }
};
</script>

<style scoped>
.clickable-icon {
  cursor: pointer;
}
</style>