CODEWITHSUNDEEP
vue.jsbootstrap-vue
Rey
Rey

Reputation: 4002

Add icon in b-button-group component in bootstrap-vue?

I checked the documentation here but seems there is no detail on how to add an icon in b-button-group button, thou I can add text. Does anybody know any easy way how to do it ?

Below is my code:

  <b-button-group>
    <b-dropdown
      size="sm"
      right
      variant="primary"
      split
      text="Features"
      v-on:click="$router.push({...})"
    >
      <b-dropdown-item>Item 1</b-dropdown-item>
      <b-dropdown-item>Item 2</b-dropdown-item>
      <b-dropdown-divider></b-dropdown-divider>
      <b-dropdown-item>Item 3</b-dropdown-item>
    </b-dropdown>
  </b-button-group>

I would like to add this <b-icon :icon="'arrows-expand'"></b-icon>Features in the text but seems there is no way because of course text only accepts raw text.

Upvotes: 1

Views: 7883

Answers (1)

Rey
Rey

Reputation: 4002

I actually found the answer to another page in the documentation where I can use the slot as below:

   <template v-slot:button-content>
      Custom <strong>Content</strong> with <em>HTML</em> via Slot
    </template>

https://bootstrap-vue.js.org/docs/components/dropdown

Upvotes: 3

Related Questions