Add markup inside a link (in the renderable array) in preprocess field

Question

My question is for D8...

I have a field which is rendered as a link. Let say for simplicity that it will be rendered like this: <a href="url">My Title</a>

I would like to add a bootstrap icon inside the link to get a result like this: <a href="url"><span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>My Title</a>

I know that I can take the url and the title from within the preprocess function to reconstruct a new link (#markup)... But is it possible to simply add the icon code somewhere in the array to get the same result?

I am adding some more information to clarify:

1-The field which is rendered as a link is a term reference field rendered as a linked label

2-Here is my try in the preprocess_field function to achieve this

function mymodule_preprocess_field(&$vars) {
  $fn = $vars['element']['#field_name'];
  switch ($fn) {
    case 'my_field':
      foreach ($vars['items'] as $key => $item) {
        $icon = '<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>';
        $vars['items'][0]['content']['#title']=$icon.$item['content']['#title'];
      }
      break;
  }
}

Answer 1

Use the FormattableMarkup class for this:

$markup = new FormattableMarkup('<a href="@url"><span class="glyphicon glyphicon-info-sign" aria-hidden="true /></a>', [
          '@url' => $url->toString(), // If $url is an Drupal\Core\Url object.
        ]);

$renderArray['your_element'] = $markup;

After edit:

Use the Markup class for this since your seem to be in control over your markup. If not use FormattableMarkup with placeholders for safety:

  function mymodule_preprocess_field(&$vars) {
    $fn = $vars['element']['#field_name'];
    switch ($fn) {
      case 'my_field':
        foreach ($vars['items'] as $key => $item) {
          $icon = '<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>';
          $uri = $item['content']['#title'];

          $formattedIcon = \Drupal\Core\Render\Markup::create($icon . $uri);

          $vars['items'][0]['content']['#title'] = $formattedIcon;
        }
        break;
    }
  }

From the FormattableMarkup docs:

When cast to a string, this object replaces variable placeholders in the string with the arguments passed in during construction and escapes the values so they can be safely displayed as HTML. See the documentation of \Drupal\Component\Render\FormattableMarkup::placeholderFormat() for details on the supported placeholders and how to use them securely. Incorrect use of this class can result in security vulnerabilities.

Answer 2

For the link field you can insert a markup-array in the title var, like this:

$icon = '<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>';
$variables['link_field_name']['title'] = [
  '#markup' => $icon . $variables['link_field_name']['title'],
];

Edit: For the term reference title use:

$vars['items'][0]['content']['#title'] = [
  '#markup' => $icon . $vars['items'][0]['content']['#title'],
];

Or like suggested from @Gun5m0k3 the new drupal 8 classy way:

$vars['items'][0]['content']['#title'] = \Drupal\Core\Render\Markup::create($icon . $vars['items'][0]['content']['#title']);

Answer 3

One way to handle this is to create an inline_template render item:

  function mymodule_preprocess_field(&$vars) {
    $fn = $vars['element']['#field_name'];
    switch ($fn) {
      case 'my_field':
        foreach ($vars['items'] as $key => $item) {
          $vars['items'][0]['content']['#title'] = [
            '#type' => 'inline_template',
            '#template' => '{{ icon }} {{ title }}',
            '#context' => [
              'icon' => '<span class="glyphicon glyphicon-info-sign" aria-hidden="true"></span>',
              'title' => $item['content']['#title'],
              ],
          ];
        }
        break;
    }
  }