I would like to make the input (type=date) field trailing icon clickable (to toggle my own date picker).

code snippet https://mdbootstrap.com/snippets/standard/s2131335/5865135

<div class="col-12 col-md-6 mb-4">
<div class="form-outline">
<i class="fas fa-exclamation-circle trailing pe-auto" style='cursor: pointer' onclick='alert("test");'></i>
<input type="date" id="course-startDate" class="form-control mb-0 form-icon-trailing" required />
<label class="form-label" for="course-startDate">Date</label>
</div>

Expected behavior: Clicking the trailing icon should trigger an alert pop up.

Actual behavior: Nothing happens when clicking the icon