Minor styling issue with 'colvis' button

Wernfried

I use DataTables with Bulma style and the button for column visibility looks like this

Generated HTML is this:

<button class="button buttons-collection buttons-colvis" aria-controls="dataTable" type="button" tabindex="0" title="Toggle column visibility" aria-haspopup="dialog">
    <span>Column visibility</span>
    <span class="icon is-small">
        <i class="fa fa-angle-down" aria-hidden="true"></i>
    </span>
</button>

It uses a Font Awesome icon, however Font Awesome library is not included neither in DataTables nor in Bulma library. Thus no icon is shown. I did not check whether this applies only to DataTables Bulma styling or to all styles.

You may add this definition to your CSS

.dt-icon--chevron-down {
  --svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='18' height='18'%3E%3Cpath fill='black' d='M7.41 8.58L12 13.17l4.59-4.59L18 10l-6 6l-6-6z'/%3E%3C/svg%3E");
  display: inline-block;
  width: 18px;
  height: 18px;
  background-color: currentColor;
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
}

and use <i class="dt-icon--chevron-down" aria-hidden="true"></i>, then the button looks as intended

Note, icon data is taken from
https://icones.js.org/collection/mdi?s=down&icon=mdi:chevron-down
https://icon-sets.iconify.design/mdi/

Kind Regards