How to add icon beside the lable using Vue Bootstrap - vue.js

Question

I have this vue bootstrap input field:
<b-form-group label="Name" label-for="name">
<validation-provider
#default="{ errors }"
name="Mapping Name"
rules="required"
>
<b-form-input
v-model="mappingData.mapping_name"
:state="errors.length > 0 ? false : null"
id="mappingName"
placeholder="Enter a maping name"
/>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-form-group>
The output is look like this :
Now, beside ( Right side of the name ) the Name label I want to add a icon which is:
<feather-icon
icon="AlertCircleIcon"
class="mr-50 my-icon"
v-b-tooltip.hover.top="'Some tooltip text'"
/>
So for that I have added this after the : <b-form-group label="Name" label-for="name">. Now it look like this:
But its should be beside the name label.
Is there any way to do this?

Answer 1

Yes. You can use the template slot label of b-form-group like this:
<b-form-group label-for="name">
<validation-provider
#default="{ errors }"
name="Mapping Name"
rules="required"
>
<template slot="label">
Name
<feather-icon
v-b-tooltip.hover.top="'Some tooltip text'"
icon="AlertCircleIcon"
class="mr-50 my-icon"
/>
</template>
<b-form-input
v-model="mappingData.mapping_name"
:state="errors.length > 0 ? false : null"
id="mappingName"
placeholder="Enter a maping name"
/>
<small class="text-danger">{{ errors[0] }}</small>
</validation-provider>
</b-form-group>