Icon insetead of text

[Roman Sarvarov]

Hey!

For example, I have that in routes:

{
  path: '/',
  name: 'home',
  component: page('home.vue'),
  meta: {
    breadcrumb: {
      label: 'Home',
      icon: 'home',
    }
  },
},

So in this case route home has icon key and it should output an icon (font awesome, for example) instead of label.

Is it possible? crumb.meta.breadcrumb.icon gives me null everytime.

[Ivan Demidov]

@RomanSarvarov Hi, interesting idea.

1. It is not clear which template to use for the icon name
2. At the moment you can try to transfer an icon template to the label. for example

meta: {
    breadcrumb: {
      label: '<i class="fa fa-home"></i>'
    }
  },

I have not tested it, but there is a suspicion that it will work.

Let me know if something goes wrong with you, we will figure it out

[Roman Sarvarov]

I guess I just found a better way:

breadcrumb: {
  label: {
    icon: 'home',
  },
},

<FontAwesomeIcon
  v-if="typeof getBreadcrumb(crumb.meta.breadcrumb) === 'object'"
  :icon="getBreadcrumb(crumb.meta.breadcrumb).icon"
/>