vue.js – How to customize bootstrap-vue dropdown menu using bootstrap-vue icon?

vue.js – How to customize bootstrap-vue dropdown menu using bootstrap-vue icon?

Using no-caret solves your problem.

Note that you can replace <custom-icon /> with <b-icon icon=three-dots-vertical />

Vue.component(customIcon, {
  template: `<svg xmlns=http://www.w3.org/2000/svg width=15.352 height=15.355 viewBox=0 0 15.352 15.355>
        <path id=Union_19 data-name=Union 19 d=M-19.5-15958.5l-7.5,7.5,7.5-7.5-7.5-7.5,7.5,7.5,7.5-7.5-7.5,7.5,7.5,7.5Z transform=translate(27.176 15966.178) fill=none stroke=#bbb stroke-width=0.5/>
    </svg>`
})

new Vue({
  el: #app,
});
<link type=text/css rel=stylesheet href=https://unpkg.com/[email protected]/dist/css/bootstrap.min.css />
<link type=text/css rel=stylesheet href=https://unpkg.com/[email protected]/dist/bootstrap-vue.css />

<script src=https://unpkg.com/[email protected]/dist/vue.min.js></script>
<script src=https://unpkg.com/[email protected]/dist/bootstrap-vue.min.js></script>


<div id=app>
  <b-dropdown no-caret>
    <template #button-content>
        Custom Dropdown
        <custom-icon /> // or any other icons for example b-icon
    </template>
    <b-dropdown-item>First Action</b-dropdown-item>
    <b-dropdown-item>Second Action</b-dropdown-item>
  </b-dropdown>
</div>

vue.js – How to customize bootstrap-vue dropdown menu using bootstrap-vue icon?

Leave a Reply

Your email address will not be published.