bootstrapのb-dropdownタグ、アイコンのみにしたとき背景色がついてしまう

Question

開発初心者です。よろしくお願いします。

実現したいこと

bootstrap-vue 2.22で、dropdownメニューを表示する際、ボタンではなくアイコンのみ（背景色なし）にしたいです。

発生している問題

https://bootstrap-vue.org/docs/components/dropdown#styling-options
上記を参考にb-dropdownタグでアイコンのみの表示にさせることは出来ましたが、「.btn-secondary」というクラスが適応されて背景色がついてしまいます。

試したこと

自作のclassでbackground-color:none !important;としてもダメでした。

背景色なし指定の上書き、もしくは自動的に適応されるクラスを適応させない方法はないでしょうか。

該当のソースコード

<b-dropdown id="dropdown-1" size="sm" toggle-class="text-decoration-none" no-caret class="dd-icon">
  <!-- <template #button-content> &#x1f50d;<span class="sr-only">aaa</span> </template>  -->
  <template #button-content
    ><font-awesome-icon :icon="['fas', 'ellipsis-vertical']" class="control-icon"
  /></template>
  <b-dropdown-item>名前の変更</b-dropdown-item>
  <b-dropdown-item>削除</b-dropdown-item>
</b-dropdown>

<style>
.dd-icon {
  background-color: none !important;
}
</style>