'Feather Icon not working in Bootstrap Modal

I am currently trying to build an asp.net web app. The feather icons work fine on normal pages, but it doesn't show when it is included in a Modal.

<link rel="stylesheet" href="~/lib/layout/feather-icon.css" />

<div class="modal fade" role="dialog">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
        <div class="modal-body">
            <i data-feather="pause-circle" class="align-middle"></i>
        <div class="modal-footer">
            <div class="row">
                <div class="col-12">
                    <button type="button" class="btn btn-primary m-1" data-dismiss="modal" aria-label="Close">Close</button>
@section Scripts{
    <script type="text/javascript" src="~/lib/feather-icons/feather.js"></script>
    <script type="text/javascript" src="~/lib/feather-icons/feather.min.js"></script>
        $(function () {
    <script type="text/javascript" src="~/js/common/chatting.js"></script>

As you can see from the below image from web browser devtools, the tag is not replaced with svg

image description

anyone know of why it cannot find the data-feather elements in the modal? And if there is a work around?


This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source