Clarification of How to Display the Icon

that is correct.
it's only really useful for 'custom' frontends.
(and you are rather comfortable writing some php.)

as an example, the 'grid' of links w/ images at the bottom of this page:
http://engineering.temple.edu/department/electrical-computer-engineering
is generated from the menu items that exist 'below' this page in the menu system.

After searching around Drupal documentation for a while, here is a theme solution to implement this module.

1 - Override theme_menu_link function in your theme's template.php file using this pattern THEME_NAME_menu_link or THEME_NAME_menu_link__MENU_NAME

2 - The function should look like this

function THEME_NAME_menu_link__MENU_NAME($variables)
{
        $element = $variables['element'];
	$sub_menu = '';
	
	if ($element['#below']) {
		$sub_menu = drupal_render($element['#below']);
	}
	
	$image = file_load($element['#localized_options']['content']['image']);
	$image_markup = theme_image(array(
		'path' => $image->uri,
		'width' => $image->image_dimensions['width'],
		'height' => $image->image_dimensions['height']
		)
	);
	
	$options = $element['#localized_options'];
	$options['html'] = true;
	
	$output = l($image_markup, $element['#href'], $options);
	
	return '<li' . drupal_attributes($element['#attributes']) . '>' . $output . $sub_menu . "</li>\n";
}

Thank you arnaudlumini. your code helped me alot.

Here is how I have done it:

/**
 * Implements hook_menu_link().
 */
function yourtheme_menu_link($variables) {
  $element = &$variables['element'];

  // If there is a image uploaded to the menu item, replace the title with the
  // image.
  if (isset($element['#localized_options']['content']['image'])) {
    $image = file_load($element['#localized_options']['content']['image']);
    $image_info = image_get_info($image->uri);

    $image_markup = theme_image(array(
        'path' => $image->uri,
        'width' => $image_info['width'],
        'height' => $image_info['height'],
        'attributes' => array(),
      )
    );

    $element['#localized_options']['html'] = true;
    $element['#title'] = $image_markup;
  }

  return theme_menu_link($variables);
}

@albertski,

your method seems to work, but how do I display both the image and the text?

@Puppetmast0r:

something like this:
$element['#title'] = $image_markup;
$element['#title'] = $element['#title']."<br>".$image_markup;

I would like to display a icon of correct answer but in my condition full url is displaying (its not displaying icon ) how i'll manage.
This icon will be in a table so user can click that icon and check the answer. please guide me where i'm doing wrong.
Thanks

$imgsrc="'.$base_url.'/scp/sites/default/files/images/corr_icon.gif"; 

$correct_link   = Url::fromUserInput('/answer/'.base64_encode($data->ans_refno).'by'.base64_encode($data->q_id));

'isanswer' =>    
                 \Drupal::l($imgsrc, $correct_link),