How can I make an icon inside of a bootstrap 5 form-floating label clickable?

Question

I'd like to have a clickable icon as part of a form-floating label but the label seems to be rendered behind the input.

I tried playing with z-index without any luck and I'm not sure what else I can do to fix the problem. Could someone point me in the right direction?

https://blazorfiddle.com/s/y4143uso

The "Test" button and icon on its own (col#3, col#4) work, but the first two col's with form-floating examples won't redirect when the icon is clicked.

@page "/"
@inject NavigationManager NavigationManager

<div class="container-fluid">
    <div class="row">
        <div class="col-1">
            <div class="form-floating">
                <input type="text" class="form-control" placeholder="bla">
                <label>LABEL<i class="fas fa-info-circle ps-1" @onclick="Test"></i></label>
            </div>
        </div>
        <div class="col-1">
            <div class="form-floating">
                <input type="text" class="form-control" value="blabla">
                <label>LABEL<i class="fas fa-info-circle ps-1" @onclick="Test"></i></label>
            </div>
        </div>
        <div class="col-1">
            <button type="button" class="btn btn-sm btn-primary" @onclick="Test">Test</button>
        </div>
        <div class="col-1">
            <i class="fas fa-info-circle ps-1" @onclick="Test"></i>
        </div>
    </div>
</div>
@code {
    void Test()
    {
        NavigationManager.NavigateTo("https://google.com");
    }
}