Search code examples
cssmaterialize

favorite button is appearing as word instead of heart using materialize


I am learning web using materialize and I am trying to create favorite button which has heart on it but when I am using materialize it show the word "favorite" instead of the heart

here is my code <div class="card-content"> <span class="card-title">Blueberries & coconut smoothie</span> <a href="" class="favorite-btn btn-floating pink pulse"> <i class="material-icons">favorite</i> </a> </div>

and here is screenshot for what I got

css


Solution

  • You must include the material-icons google fonts CDN for it to work.

      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    

    paste the above tag in the <head> tag of your index.html and it should work fine, also refer materialize docs for icons