title: Image List view with text and URL
body: <p>I want to display and list with icon and text. List is link to specific URL. I am storing all these in a array but image is not populating from the array. here is a spinet. </p>
  
  <pre><code>var mainPanel = [ {
      icon : "images/green/home.png",
      title : "Home",
      url : "#tilehome-page"
  }, {
      icon : "images/green/home.png",
      title : "Mayor's Conner)",
      url : "#mayorsmessage-page"
  }, {
      icon : "images/green/home.png",
      title : "Report A Problem",
      url : "#reportaproblem-page"
  } ];  
  
  function createmenuPnl() {
      var items = '';
      //ul = $(".mainMenu:empty"); 
      var ulStr = "&lt;ul&gt;";
      for (var i = 0; i &lt; mainPanel.length; i++) {
          items += '&lt;li&gt;&lt;a href="' + mainPanel[i].url + '"&gt; + mainPanel[i].title
          + '&lt;/a&gt;&lt;/li&gt;';
      }
      ulStr+= items;
      ulStr+='&lt;/ul&gt;';
      console.log('The ulStr formed is:'+ulStr);
      $("#cssmenu").append(ulStr);
      $("#cssmenu").trigger( "updatelayout" ); 
  
  }
  </code></pre>
  
  <p>All I want is to add image icon dynamically in the list  </p>