I've been using the example Codepen (https://codepen.io/whoistobias/pen/yLNgjwy) to try to extend the Vuetify VBtn component to create a reusable Button Icon component.

I'm awfully close, but as usual I'm stumbling at the last hurdle.

The main code is this:

const VBtn = Vue.options.components["VBtn"];
const VIcon = Vue.options.components["VIcon"];

const ButtonIcon = {
  name: 'ButtonIcon',
  
  extends: VBtn,

  props: {
    icon: {
      default: true,
      type: Boolean
    },
    iconColor: {
      default: 'info',
      type: String
    },
    iconName: {
      default: 'help',
      type: String
    },
    outline: {
      default: true,
      type: Boolean
    }
  },

  methods: {
    genContent () {
      return this.$createElement('div', {
        class: 'v-btn__content'
      }, this.$slots.default || [this.$createElement(
        VIcon,
        {
          props: {
            color: this.iconColor
          }
        },
        this.iconName
      )])
    }
  }
};

The bit that's not quite right is where the this.iconName is being inserted into the VIcon. The output of this is "add" instead of add when the prop iconName's value is add.

I've done my best to try digest the contents of the help docs around using createElement in the Vue docs - https://v2.vuejs.org/v2/guide/render-function.html?redirect=true#createElement-Arguments

Here's my forked Codepen of the working code: https://codepen.io/scp-nm/pen/PoQPVEP

Any help with this will be greatly appreciated.

CodePudding user response：

The problem is your icon names are incorrect. The default icon names are prefixed with mdi-. You can see the list of available icons from https://materialdesignicons.com/.

I'm assuming mdi-plus is a good icon for "add", and mdi-help-circle-outline for "help":