Feather: Dynamic change one icon to another

[colebemis]

I'm not sure I know what you mean. Could you find an example of doing this with another icon set?

[vip9]

e.g. https://fontawesome.com/how-to-use/svg-with-js
search for "Changing icons by changing class"

<button>Open up <i class="fa fa-angle-right"></i></button>

<script>
  document.addEventListener('DOMContentLoaded', function () {
    $('button').on('click', function () {
      $(this)
        .find('[data-fa-i2svg]')
        .toggleClass('fa-angle-down')
        .toggleClass('fa-angle-right');
    });
  });
</script>

clicking a icon button changes that icon to another (here, an arrow)

[craigrodway]

If you have jQuery, this seems to work:

$(".parent svg.feather.feather-circle").replaceWith(feather.icons.square.toSvg());

Essentially - find the existing Feather-generated SVG element and replace it with a new one using the Feather JS function.

[colebemis]

@craigrodway's solution should work. If it works for you, feel free to close this issue.

[MarcelloTheArcane]

@craigrodway Or without jQuery:

document.querySelector('.parent svg.feather.feather-circle').replaceWith(feather.icons.square.toSvg())

[fahadashiq12]

The answer to this question is quite elaborative to explain.