A setting to define some space between the icon and the text

Found it impossible to create a general solution with css, but managed to create some whitespace after the menu-icon with the ImageCache Actions module (http://drupal.org/project/imagecache_actions).

I added the following actions to the menu_icon ImageCache preset:

• Add action "Scale And Crop" for desired icon size (E.g. 16x10)
• Add action "Define Canvas"
• Set background color, E.g. ffffff
• Check "Resize canvas under image (possibly cropping)"
• Set exact size (E.g. 21x10 for 5 px spacing) and set X left, Y center

Hope it helps!

+1 for need of a settings page to specify padding between icon and text.
I worked around this by modifying the menu_icons_css_item.tpl.php to:

<?php

 $padding=1;
?>
a.menu-<?php print $mlid ?>, ul.links li.menu-<?php print $mlid ?> a {
  background-image: url(<?php print $path ?>);
  padding-<?php print "$pos:".($size+$padding)?>px;
  background-repeat: no-repeat;
  background-position: <?php print $pos?>;
  height: <?php print $size?>px;
}

This, of course, only affects new menu icons you add after making this change.

@promes: please note that you may copy the template to your active theme's directory and edit it there, to avoid having to re-do your edits every time you update menu_icons.

since the time ... is there a better way to fix this issue ?

I installed Version: 7.x-3.0-beta4+0-dev

Tried both ways...
1. menu_icon ImageCache preset actions introduced by Tino
2. modifying the menu_icons_css_item.tpl.php introduced by Anandkumar

But the icon still glued together with text as the screenshot, Is there any change since then...

Thanks,