DAHLIA Pattern Library

Link Icon 

<a class="button has-icon " href="javascript:void(0)">
	  <span class="ui-icon ui-small">
	    <svg>
	      <use xlink:href="#i-arrow-down"></use>
	    </svg>
	  </span>
	  Button
	</a>
<a class="button has-icon " href="javascript:void(0)">
	  <span class="ui-icon ui-small">
	    <svg>
	      <use xlink:href="#i-download"></use>
	    </svg>
	  </span>
	  Button
	</a>
<a class="button has-icon " href="javascript:void(0)">
	  <span class="ui-icon ui-small">
	    <svg>
	      <use xlink:href="#i-forward"></use>
	    </svg>
	  </span>
	  Button
	</a>
<a class="button has-icon " href="javascript:void(0)">
	  <span class="ui-icon ui-small">
	    <svg>
	      <use xlink:href="#i-info"></use>
	    </svg>
	  </span>
	  Button
	</a>
<a class="button has-icon " href="javascript:void(0)">
	  <span class="ui-icon ui-small">
	    <svg>
	      <use xlink:href="#i-like"></use>
	    </svg>
	  </span>
	  Button
	</a>
 
{{#each icons}}
	<a class="button has-icon{{default icon-side ''}} {{default classes ''}}" href="javascript:void(0)">
	  <span class="ui-icon ui-{{default scale 'small'}}">
	    <svg>
	      <use xlink:href="#i-{{this}}"></use>
	    </svg>
	  </span>
	  {{ default text "Button" }}
	</a>
{{/each}}
 
{
  "modifiers": [
    "normal",
    "primary",
    "secondary",
    "tertiary",
    "alert",
    "alert-fill",
    "tint",
    "deep",
    "tiny is-leased",
    "tiny is-waitlisted",
    "tiny is-processing",
    "tiny is-approved",
    "tiny is-withdrawn",
    "tiny is-disqualified",
    "tiny is-appealed",
    "ghost-white",
    "large",
    "tall",
    "small",
    "tiny",
    "expand",
    "disabled",
    "button-link"
  ],
  "icons": [
    "arrow-down",
    "download",
    "forward",
    "info",
    "like"
  ]
}

When using a a element, always add role="button" for accessibility.