Ícono de Font-Awesome con un conjunto de eventos onclick

Estoy tratando de usar el siguiente ícono de fuente impresionante

<i class="fa fa-minus-circle"></i>

como un icono de eliminación junto a los elementos de una lista en mi página como esta:

Item 1  delete-icon
Item 2  delete-icon

Al hacer clic en uno de estos iconos, necesito ejecutar una función de JavaScript…

¿Con qué elemento html debo envolver el ícono? Noté que cuando uso una etiqueta de anclaje se vuelve azul y cuando uso un botón termina envuelto en un botón. ¿Hay más opciones?

Esencialmente quiero hacer esto

<a onclick="Remove()"><i class="fa fa-minus-circle"></i></a>

o esto

<button onclick="Remove()"><i class="fa fa-minus-circle"></i></button>

Pero haz que solo el icono aparezca tal cual, sin modificaciones. Sin color azul, y no envuelto dentro de un botón.

Simplemente use un div etiquetar o span etiqueta con onclick

<div onclick="myFunction()">
       <i class="fa fa-minus-circle"></i>
</div>

o

<span onclick="myFunction()">
     <i class="fa fa-minus-circle"></i>
</span>

Quite el contorno azul de la etiqueta de anclaje con CSS o configure el onclick-handler en el icono de fuente impresionante en sí mismo:

<i class="fa fa-minus-circle" onclick="Remove()"></i>

Aquí una forma de usar la fuente impresionante con bootstrap.

{{#if currentUser}}
    <a class="btn btn-large btn-primary logout" href="#">
        <i class="fa fa-sign-out" aria-hidden="true">Logout</i>
    </a>
{{else}}
    <a href="http://stackoverflow.com/login" class="btn btn-primary login-toggle">Register/Login</a>
{{/if}}

JS correspondiente para hacer un evento de clic en CERRAR SESIÓN botón

'click .logout':() =>{
//your JS functionality.
}

<a style="color: inherit;" onclick="Remove()"><i class="fa fa-minus-circle"></i></a>

Esto tomará el color predeterminado del icono. También puede especificar cualquier color que desee.