title: How can I repeat a certain number of icons using Polymer?
body: <p>I just need to do something simple, but I'm baffled how to go about it.</p>
  
  <p>I have a list of students with a certain number of credits. I want to display one star for every credit completed.</p>
  
  <p>e.g., </p>
  
  <p>John ★<br>
  Sarah ★★<br>
  Ken ★<br>
  Jared ★★★★  </p>
  
  <p>The student's info is contained in JSON that is bound to each student's div, so it can be accessed via <code>{{student.credits}}</code> etc., but something like <code>&lt;template repeat&gt;</code> doesn't seem to be made for something like this. I also thought maybe I could just add a class such as <code>star2</code> and override the default icon CSS but since each icon uses a SVG, it doesn't want to repeat like a standard image background would. </p>
  
  <p>Any helps or pointers would be greatly appreciated!</p>