jquery - Bootstrap Popover からボタンのデータ属性値を取得する方法

Question

ブートストラップ ポップオーバーを使用して、小さな font-awesone アイコン ピッカーを作成しようとしています。ポップオーバー コンテンツの HTML 構造は次のとおりです。

<div class="popover-content">
    <div class="icon-container form-group">
        <div class="icons">
            <button data-icon="fa-500px" class="icon input-group"><i class="fa fa-500px"></i></button>
            <button data-icon="fa-adjust" class="icon input-group"><i class="fa fa-adjust"></i></button>
            <button data-icon="fa-adn" class="icon input-group"><i class="fa fa-adn"></i></button>
            <button data-icon="fa-align-center" class="icon input-group"><i class="fa fa-align-center"></i></button>
            <button data-icon="fa-align-justify" class="icon input-group"><i class="fa fa-align-justify"></i></button>
            <button data-icon="fa-amazon" class="icon input-group"><i class="fa fa-amazon"></i></button>
            <button data-icon="fa-ambulance" class="icon input-group"><i class="fa fa-ambulance"></i></button>
        </div>
    </div>
</div>  

そして、ここにjQueryがあります..

$('.icons-wrapper').on('shown.bs.popover', function () {
    $('button.icon').on( 'click', function() {
        var selectedIcon = $(this).data('icon');
        console.log( 'The selected icon is: '+ selectedIcon);
    });
});

エラーメッセージが表示されます..

ReferenceError: selectedIcon is not defined

クリックしたドキュメントをバインドしてもエラーが残ります。

$(document).on('click', 'button.icon', function () {
    var selectedIcon = $(this).data('icon');
    console.log( 'The selected icon is: '+ selectedIcon );
});

私が間違っていることは何ですか？