b-input-group prepend changes

Hi all,

This used to work, but has stopped:

              <b-form-group horizontal class="mb-0">
                <b-input-group
                  title="Filter your data"
                  prepend="<i class='fas fa-filter'/>"
                >
                  <b-form-input v-model="filter" placeholder="Type to search" />
                  <b-input-group-append>
                    <b-btn :disabled="!filter" @click="filter = ''"
                      >Clear</b-btn
                    >
                  </b-input-group-append>
                </b-input-group>
              </b-form-group>

the font awesome would show, now I just see <i class='fas fa-filter'/>

Should I just use the label slot or prepend component like mentioned in https://github.com/bootstrap-vue/bootstrap-vue/issues/2070

Thanks.

[tmorehouse]

https://bootstrap-vue.js.org/docs/components/input-group#comp-ref-b-input-group-text

<b-input-group>
  <b-input-group-text slot="prepend"><i class="fas fa-filter fa-fw"></i></b-input-group-text>
  <b-form-input v-model="filter" placeholder="Type to search"></b-form-input>
  <b-button slot="append" :disabled="!filter" @click="filter = ''">Clear</b-button>
</b-input-group>

[tmorehouse]

all props that accept test no longer accept HTML (unless he prop is appended with Html, i.e. labelHtml), due to potential Cross Site Scripting (XSS) vulnerabilities when passing user supplied content to the component.

For Input Groups, use the slots, or individual helper components for prepend/append for HTML content.