자바스크립트/제이쿼리 i태그 변경 질문드립니다!!!

제가 material icon 이라는 사이트에서 구글웹폰트처럼 i태그를 이용해서 아이콘 불러오는 식으로

아이콘 쓰고 있거든요.

i 태그를 이용하여 즐겨찾기

테두리만 있는 하트모양을 불러와놓고 이미지 슬라이드위에 포지션으로 띄워놨어요 

이것을 자바스크립트로 클릭하면

테두리만 있는 하트모양을 

안에 색칠해져있는 하트모양 아이콘 으로 on/ off 로 만드려 하는데

그럼 클릭했을때 i 태그가 다른 i 태그로 내용이 바뀌는건데 

어떻게 코드를 작성해야하나요...??ㅠㅠ

학원에서 css까지만 배우고 제이쿼리는 예전학원에서 겉핥기 식으로만 배워서 ㅠ 독학중이거든요...

<i class="material-icons">
favorite_border
</i>

이것을

<i class="material-icons">
favorite
</i>

로 바꾸고 싶어요 클릭할때마다 계속 바뀌게...