Ratings

Ratings are an internationally recognised symbol for quality standards.

Filled Star

Display a filled star with help of the demo & code refernce given below.

        
  <div class="ratings">
    <span class="material-icons rating-icon"> star </span>
  </div>
        
      

Half Filled Star

Display a half-filled star with help of the demo & code refernce given below.

        
  <div class="ratings">
    <span class="material-icons rating-icon"> star_half </span>
  </div>
        
      

Empty Star

Display an empty star with help of the demo & code refernce given below.

        
  <div class="ratings">
    <span class="material-icons rating-icon"> star_border </span>
  </div>
        
      

5 Star Ratings - Normal

Club the stars together to form a 5-star rating of normal size as shown below.

        
  <div class="ratings">
    <span class="material-icons rating-icon"> star </span>
    <span class="material-icons rating-icon"> star </span>
    <span class="material-icons rating-icon"> star </span>
    <span class="material-icons rating-icon"> star_half </span>
    <span class="material-icons rating-icon"> star_border </span>
  </div>
        
      

5 Star Ratings - Small

Club the stars together to form a 5-star rating of small size as shown below.

        
  <div class="ratings ratings-sm">
    <span class="material-icons rating-icon"> star </span>
    <span class="material-icons rating-icon"> star </span>
    <span class="material-icons rating-icon"> star </span>
    <span class="material-icons rating-icon"> star_half </span>
    <span class="material-icons rating-icon"> star_border </span>
  </div>
        
      

3 Star Ratings

Club the stars together to form a 3-star rating of normal size as shown below.

        
  <div class="ratings">
    <span class="material-icons rating-icon"> star </span>
    <span class="material-icons rating-icon"> star_half </span>
    <span class="material-icons rating-icon"> star_border </span>
  </div>