Create a Bootstrap select with options on an icon span - html

Question

I've created a blade with a signboard (screenshot).
The signboard has a foreach containing each created column with its name, color and assigned cards.
For sorting these cards I have added an icon next to each column title.
I'd like to be able to open a select and see it's options when clicking on the sort-icon.
I've tried to add a hidden select element and used .selectpicker('toggle') to try and toggle it when clicking on the element, but without any success.
The foreach loop is shown in the code below, where $statuses are the columns's values given form the controller.
<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
<div class="row">
<div class="col-10">
<h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
<span class="small material-icons" style="display: inline">sort</span>
</div>
<div class="col-2">
<small class="totalCandidates mt-0 float-right"></small>
</div>
</div>
</div>
To summarize my question: Is there any way that I could use an icon instead of a bulky select box to show my sortable options?
I'd really appreciate any support or solutions.
If it's not possible in any way I would like to hear this too so I could look for other options.
Kind regards and my thanks in advance.
EDIT
My updated card header after Bernhard Beatus's answer:
<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
<div class="row">
<div class="col-10">
<ul class="nav nav-pills">
<h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
<li class="nav-item dropdown pl-1">
<a data-toggle="dropdown" href="#"><span class="small material-icons">sort</span></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Name</a>
<a class="dropdown-item" href="#">Status</a>
<a class="dropdown-item" href="#">Position</a>
<a class="dropdown-item" href="#">Creation date</a>
</div>
</li>
</ul>
</div>
<div class="col-2">
<small class="totalCandidates mt-0 float-right"></small>
</div>
</div>
</div>
This will now open a dropdown-menu, so unfortunally still no select box, but it'll have to do.

Answer 1

So now there is an Icon.
I created a fiddle for you: https://jsfiddle.net/bogatyr77/1xfwjq6c/2/
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap#4.6.0/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<div class="col pl-1 pr-1">
<div class="card bg-transparent h-100">
<div class="card-header" style='border-bottom: 3px solid {{ $status->color }}'>
<div class="row">
<div class="col-10">
<ul class="nav nav-pills">
<h5 class="card-category h3 mb-0" style="display: inline">{{ $status->name }}</h5>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false"><i class="fas fa-filter"></i></a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Separated link</a>
</div>
</li>
</ul>
<span class="small material-icons" style="display: inline"></span>
</div>
<div class="col-2">
<small class="totalCandidates mt-0 float-right"></small>
</div>
</div>
</div>
{{-- uses jQuery to show corresponding cards --}}
<div class="card-body kanbanColumn" data-status='{{ $status->id }}'></div>
</div>
</div>
<div id="candidateModal"></div>