icons on a listview , jquery mobile

Question

I have a listview and i want to add some icons. I want the final result to look like this here:

Stanford Mobile Webpage

As you can see the icons look really nice(same size as the text). Now i am trying to do the same with my project. However i get this result:

As you can see the icon looks really small... I am viewing the page source of the Stanford site and what they do is :

    <ul data-role="listview" data-inset="true">
        <li><a href="news/"><img src="img/icon/news.png" alt="News" class="ui-li-icon">News</a></li>
    </ul>

that means they add the class="ui-li-icon" attribute in the list. But this results in a really small icon..(i tried with 48x48 , 32x32 ...)

How can i fix this? Any ideas?

EDIT

---

Since i am trying to replicate the behavior of the aforementioned site , heres the CSS from the stanford page. Maybe someone can see where exactly they give this behavior.

/* Widen and center h1 text between "Back" and "Home" buttons */
.ui-title {
    width:50%;
    margin-left:26% !important;
    margin-top: 0 !important;
    padding: 5px 0 !important;
}
/* Align Home button left */
.ui-header .ui-btn-right {
    left:10px;
    right:inherit;
}
/* Capitalize header h1 */
.ui-header h1 {
    text-transform:capitalize;  
}
/* Full Site/About icon spacing */
.ui-btn-inner {
    padding-left:40px;  
}
/* Nested list width fix http://bit.ly/fJGPsg */
.ui-li .ui-btn-inner a.ui-link-inherit {
    padding-top:0.7em;
    padding-right:30px;
    padding-bottom:0.7em;
}
/* Remove background seal */
.ui-content {
    background:none;
}
/* Make time aside smaller to allow for longer titles */
.ui-li-aside {
    width:20% !important;
}
/* add space after list dividers */
ul.copy-divider {
    margin:20px -15px 0 -15px !important;
}
/* Home page banner */
h2#banner {
    background:transparent url(../img/banner/banner.jpg) no-repeat left 10px;
    width:320px;
    height:284px;
    margin:-10px auto -150px auto;
    text-indent:-9999px;
}
/* Home page banner landscape */
.landscape h2#banner {
    background:transparent url(../img/banner/banner-landscape.jpg) no-repeat left 10px;
    width:480px;
    height:290px;
    margin:-10px auto -175px auto;
    text-indent:-9999px;
}
/* Remove reduntant extra top padding - don't put h2's in front of ul.listview */
h2 {
    margin:0;
    font-size:20px;
}
/* Home page icons */
.ui-li-icon {
    top:0.4em !important;
}
/* Make room for icons */
.ui-li-has-icon .ui-btn-inner a.ui-link-inherit, .ui-li-static.ui-li-has-icon {
    padding-left:47px;
}
/* Add space after intro paragraphs */
p.intro {
    margin-bottom:30px !important;
}
/* Search box top margin */
.ui-listview-filter {
    margin-top:20px;
}
/* Remove bold from grid */
.ui-grid-b {
    font-weight:normal; 
}
/* About */
#about-stanford {
    background:url(../img/logos/about-stanford.png) no-repeat left top;
    text-indent:-5000px;
    width:254px;
    height:50px;
    margin:0 auto;
}
/* Dynamic pages */

/* News */
/* Thumbnails */
.ui-li-thumb {
    top:21px;
}
/* Don't append headline */
#news h3 {
    white-space:normal;
}
/* Events */
/* Capitalize first letter in Events pages */
#event h1 {
    text-transform:capitalize;  
}
/* Don't append headline in Events list page paragraphs */
#event h3, #featured h3, #today h3 {
    white-space:normal;
    padding-bottom:1px; /* Make room for links bottom-border */
}
/* Format Events thumbnails to match News thumbs size for consistencey */
#event .ui-li-thumb, #featured .ui-li-thumb, #today .ui-li-thumb {
    top:auto;
    max-height:80px;
}
/* e theme */
.ui-btn-up-e { /* Lighter gradient: light to dark */
    background:-webkit-gradient(linear, center top, center bottom, from(rgba(157,149,115,.5)), to(rgba(157,149,115,.7)));
    border:#000 !important;
}
.ui-btn-hover-e { /* Darker gradient: light to dark */
    background:-webkit-gradient(linear, center top, center bottom, from(rgba(196,191,169,.7)), to(rgba(196,191,169,1)));
    border:red;
}
ui-btn-down-e {
    background:green;
    border:green;
}

Answer 1

@yeyene gave an excellent answer when you know the proportions of the icon beforehand. In some cases you know only the height if the icon. Try re-defining the .ui-listview .ui-li-icon classes:

.ui-listview .ui-li-icon {
  max-height: 100% !important;
  max-width: 100% !important;
  position: static !important;
  vertical-align: middle;
  padding-right: 10px;
}

The max-height and max-width attributes give image its original size defined by height and width attributes. The other three attributes make image aligned with the text row.

To get rid of the default left padding you can add an extra class to your links:

<ul data-role="listview" data-inset="true">
    <li><a href="news/" class="custom-listlink"><img src="img/icon/news.png" alt="News" class="ui-li-icon">News</a></li>
    <li><a href="events/" class="custom-listlink"><img src="img/icon/events.png" alt="Events" class="ui-li-icon">Events</a></li>
</ul>

And CSS:

.custom-listlink {
  padding-left: 1em !important;
}

Answer 2

Make your icon image size 40x40 px.

Find jquery.mobile-1.3.0.css that you are using, replace this old css with new one.

OLD CSS

.ui-listview .ui-li-icon { 
    max-height: 16px; 
    max-width: 16px; 
    left: 10px; 
    top: .9em; 
}

NEW CSS

.ui-listview .ui-li-icon {
    max-height: 40px;
    max-width: 40px;
    left: 10px;
    top: .9em;
}