Well there are three basic techniques, two of which have problems:
the obvious CSS solution is to change the list bullet style to use an image. Unfortunately this is inconsistent across browsers
the second is to place an img tag within the list item, which is what appears to be done at the site you link to. The problem with this is that you can't change the image simply by changing the CSS. In Moodle terms, this isn't controllable by the 'theme'
So I went with a third approach, which I used for my block rewrite and which you can see at the demo page Urs set up. The approach is to attach a non-repeating background image to the a tag inside the li which is postioned like so:
.block-list li a {
padding: 0.2em 0 0.2em 30px;
background-repeat: no-repeat;
background-position: 10px center;
display: block;
}
and the individual images are selected with this:
.block-list li.people-profile a {
background-image: url(img/user.gif);
}
This has several benefits including allowing the theme to dictate the image, filetype, size and position all of which are constrained to some degree if an img tag is used.