Vuetify: [Bug Report] custom svg icons not handling click events

[shaikemarc]

Versions and Environment

Vuetify: 1.4.2
Vue: 2.5.22
Browsers: Google Chrome
OS: Linux

Steps to reproduce

• Configure Vuetify to work with custom icons set - in my case svg's from npm: "material-design-icons-iconfont"
• In particular, configure the "clear" icon to be "Close"

Expected Behavior

Clicking on the "X" icon will remove the selected item from the input.

Actual Behavior

Instead, the list itself is being displayed. It seems like the click event is not attached to the custom icon

Reproduction Link

https://github.com/shaikemarc/testvuetify

[Mintonne]

Same here. I am using vue-svgicon in my project.

I was not able to run @shaikemarc's project so I setup another one using Vue CLI 3.

Repo

https://github.com/Mintonne/vuetify-clear-bug

Demo

https://clearbug.netlify.com/

Affected Components

All components with the clearable prop.

[nekosaur]

@Mintonne Is your issue different than OPs? The custom icon does not show up at all in the demo?

[Mintonne]

@nekosaur

Unless I am misreading OP's issue, they are the same.

If the clear icon is set to a component icon, clicking on it does nothing.

import {  Clear } from './components/icons';

Vue.use(Vuetify, {
  icons: {
    'clear': {
      component: Clear
    }
}

[shaikemarc]

@nekosaur @Mintonne

The same. Clicking does open the Menu but does not clear.

[nekosaur]

My problem is that I do not see the close icon in your demo, but perhaps that's an issue on my end.

[shaikemarc]

I too don't see the icon of @Mintonne demo.

[Mintonne]

@nekosaur

You are right. The custom icons are not rendered on Chrome for some reason. The markup is there though.

On firefox, they show up just fine.

[Mintonne]

@nekosaur @shaikemarc

Should be fixed now.

[Mintonne]

UPDATE: Append and prepend icons are also affected. I have updated the demo to showcase this.

[strideynet]

This is also affecting standard v-text-fields as well as auto-completes

[KaelWD]

vue-mdi doesn't delegate event listeners, and v-icon just renders the target component directly without anything wrapping it. We could probably use nativeOn instead to work around poorly designed icon components?

[AGPDev]

@KaelWD Work tks.
@Mintonne i will make PR to help.

[Mintonne]

Hey @AGPDev

vue-mdi is a fork of vue-material-design-icons with a few changes.

The original author seems to be actively maintaining the project. I think they will appreciate the PR. I can always get it from there.