Drupal - How to add a custom icon or symbol to a flag link?

Option 1: Show an image beside the Flag text

You can use CSS to add padding to the left of the text and in it show a background image, as shown also in the community documentation about How to show an image beside the text. Here is an excerpt from it (replace "bookmarks" with the machine-name of your flag):

.flag-bookmarks a {
  padding-left: 20px;
}
.flag-bookmarks a.flag-action {
  background: url(images/i-dont-like-it.png) no-repeat left center;
}


.flag-bookmarks a.unflag-action {
  background: url(images/i-like-it.png) no-repeat left center;
}

Refer to the Flag Theming guide for (way) more details, i.e.:

• Theming flag links using CSS, which provides a "map" of the HTML that makes a flag link.
• Theming flag links using Templates, which explains how to use the flag.tpl.php file in the 'theme' folder that is located inside Flag's own folder, and which is used to generate the HTML for the Flag links. It also explains how you can theme different flags differently, using a flag specific flag--FLAGNAME.tpl.php file (whereas FLAGNAME is the flag's machine-name).
• Theming examples, which contains solutions to some common theming tasks.

Option 2: Transform Flag link into a button

You can transform the Flag link into a button, by adding this CSS (quote from that link):

.flag-wrapper.{flag-name} a.flag-action {
  background-image: url('path to the button image');
  display:block;
  text-indent:-9999em;
}
.flag-wrapper.{flag-name} a.unflag-action {
  background-image: url('path to the button image');
  display:block;
  text-indent:-9999em;
}

Notes:

• text-indent:-9999em hides the element (by placing it off the screen).
• Replace .{flag-name} with your flag's machine-name.

If you are using the Flag module for rendering the flag link, then you can use following code for showing images instead link text:

function theme_preprocess_flag(&$vars){
    $state = ($vars['action'] == 'flag' ? 'off' : 'on');
    $image_file = $vars['directory'] . '/images/flag-' . $vars['flag']->name . '-' . $state . '.png';
    if (file_exists($image_file)) {
        $vars['link_text'] = theme_image(array('path' => $image_file,   'attributes' => 
        array('class' => array('flag-' . $vars['flag']->name . '-' . $state))));
     }
}

After using this code in template.php place images in your theme directory named like flag-flag_machine_name>-off|on.png.

Paste this code in template.php

function Your_theme_preprocess_flag(&$vars) {
  $class = ($vars['action'] == 'flag') ? '<i class="fa fa-heart-o">   </i>' : '<i class="fa fa-heart"></i>';
  $vars['link_text'] = $class;
  $title_wishlist = ($vars['action'] == 'flag') ? 'Add to wishlist' : 'Remove from wishlist';
  $vars['link_title'] = $title_wishlist;
}