Magento 2 – How to Add Icons to User Links (My Account, Login, Sign In)

In any case do not edit the template file (links.phtml). This serves as a general template for all link lists. For example it is used for the links in the footer also.
With toplinks.php you can do whatever you want because is deprecated since CE v1.4.0.1.
I recommend using the xml files that add the links to the top container to achieve what you need.
The addLink method that is called when adding a new link supports some parameters that allow you to add classes and other attributes on li and a tags in the links and some text before the link and after the link.

public function addLink($label, $url='', $title='', $prepare=false, $urlParams=array(),
        $position=null, $liParams=null, $aParams=null, $beforeText='', $afterText='')
    { ... }

If you want to add an icon to my account menu you can set the $beforeText to <span class="icon"></span> and add some styles on the icon class.
For the cart and checkout links it's a little trickier because they are added via a block object not directly from the layout file.
If you need something different for the cart or checkout lins all you have to do is override the methods Mage_Checkout_Block_Links::addCartLink() or Mage_Checkout_Block_Links::addCheckoutLink(). These 2 call the same addLink() and you can pass different parameters to it.

As of Magento 2.0.5, I don't think there is a structured way to do this.

Core Magento modules do it like this:

• top menu items are added via menu.xml files

• the CSS class is generated via the following code where $menuId is the id attribute of the menu item:

  $itemName = substr($menuId, strrpos($menuId, '::') + 2);
  $itemClass = "item-" . str_replace('_', '-', strtolower($itemName));
  

• this CSS class is then being used in the app/design/adminhtml/Magento/backend/Magento_Backend/web/css/source/module/_menu.less . For instance:

  .item-marketing {
      > a {
          &:before {
              @_menu-item-dashboard__size: 2rem;
              content: @icon-promotions__content;
              font-size: @_menu-item-dashboard__size;
              padding-top: @menu-item-icon__height - @_menu-item-dashboard__size;
           }
      }
  }
  

• The icon itself it set via the content attribute that uses a less variable. In the example above, the less variable is @icon-promotions_content and is declared under app/design/adminhtml/Magento/backend/web/css/source/variables/_icons.less :

  @icon-promotions__content: '\e609';
  

• The \e609 is an unicode entry then used in the app/design/adminhtml/Magento/backend/web/fonts/admin-icons/admin-icons.svg file (generated by IcoMoon btw) to generate the corresponding glyph:

  <glyph unicode="&#xe609;" glyph-name="promotions" horiz-adv-x="1170" d="M59.153 425.818l164.053-38.141v303.902l-164.053-38.141v-227.621zM1122.198 900.847l-837.712-194.959v-335.978l140.328-376.832 151.712 57.45-104.049 279.113 649.668-151.18v722.385z" />
  

I reckon the main problem is that the menu.xml does not handle such thing as an icon attribute, you can see it by looking at the app/code/Magento/Backend/etc/menu.xsd:

    <xs:attribute name="id" type="typeId" use="required" />
    <xs:attribute name="title" type="typeTitle" use="required" />
    <xs:attribute name="module" type="typeModule" use="required" />
    <xs:attribute name="sortOrder" type="xs:int" use="optional" />
    <xs:attribute name="action" type="typeAction" use="optional" />
    <xs:attribute name="parent" type="typeId" use="optional" />
    <xs:attribute name="toolTip" type="typeTitle" use="optional" />
    <xs:attribute name="resource" type="typeResource" use="required" />
    <xs:attribute name="dependsOnModule" type="typeModule" use="optional" />
    <xs:attribute name="dependsOnConfig" type="typeDependsConfig" use="optional" />