Make an Icon Clickable


Topic: Make an Icon Clickable

cawgit asked 5 years ago

Expected behavior*_Be able to click on an icon and have it set a variable to true to open a modal_*Actual behavior*_Icon is not clickable._*Resources (screenshots, code snippets etc.)

Click the link to view the image. I want the question mark to be clickable.


Magdalena Dembna staff premium answered 5 years ago

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>

Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: 5.6.0
  • Device: Desktop
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: No
  • Provided link: Yes