Ripple effect not working mdc-icon-toggle in material components

Just started with material components. I am trying mdc-icon-toggle, the HTML code

<i class="mdc-icon-toggle material-icons" role="button" aria-pressed="false" aria-label="Add to favorites" tabindex="0"         
    data-toggle-on='{"label": "Remove from favorites", "content": "favorite"}'
    data-toggle-off='{"label": "Add to favorites", "content": "favorite_border"}' 
    data-mdc-auto-init="MDCIconToggle">
      favorite_border
 </i>

JS Code

const iconEl = document.querySelector('.mdc-icon-toggle');

iconEl.addEventListener('MDCIconToggle:change', ({detail}) => {
  alert(detail.isOn)
});

Basic functionality is working fine, I am able to listen to the event but the ripple effect is not working properly when I click on the icon there is shadow around the icon that never goes away. Am I missing something as this is with radio button too?