Add icon to menu link that has system.admin as a parent

Question

So I have this code in my links.meny.yml file:

webtrack_update_reminder.main:
  title: 'Reminders'
  description: 'Reminders for your project'
  parent: system.admin
  route_name: webtrack_update_reminder.content
  weight: 100

Which adds a link to the "manage toolbar". Now my question is, how do I place an icon next to the link, just like the other links in the toolbar?

I have been searching but I didn't came up with an answer for Drupal 8.

Thanks in advance.

Answer 1

You can take look at what the core toolbar module's toolbar.icons.theme.css.

I think the class for your menu item becomes .toolbar-icon-webtrack-update-reminder-main.

.toolbar-icon-webtrack-update-reminder-main:before {
  background-image: url(path/to/svg);
}
.toolbar-icon-webtrack-update-reminder-main:active:before,
.toolbar-icon-webtrack-update-reminder-main.is-active:before {
  background-image: url(path/to/svg);
}

Answer 2

As per the answer by @mradcliffe, styles for the regular and active states would need to be created. However you'd want to add them as a separate library which you'd include on admin pages, rather than edit core files.

So take the styles in @mradcliffe's answer, or whatever you determine to be correct, and save it to your module in css/webtrack-update-reminder-toolbar-icon.css.

In your module's webtrack_update_reminder.libraries.yml file, something like this:

toolbar-icon:
  version: 1.0
  css:
    theme:
      css/webtrack-update-reminder-toolbar-icon.css: {}

Then in your module's webtrack_update_reminder.module file, something like so:

/**
 * Implements hook_page_attachments().
 */
function webtrack_update_reminder_page_attachments(array &$attachments) {
  $is_admin = \Drupal::service('router.admin_context')->isAdminRoute();
  if ($is_admin){
    $attachments['#attached']['library'][] = 'webtrack_update_reminder/toolbar-icon';
  }
}

That should be all that's needed to load the library (i.e. your stylesheet) on any admin pages, which will in turn apply your styles to the toolbar item and show your custom toolbar icon.

Answer 3

Don't take any chances

mymodule.module

/*
 * Implements hook_toolbar_alter()
 */
function mymodule_toolbar_alter(&$items) {
  $items['administration']['#attached']['library'][] = 'mymodule/toolbar';
}

mymodule.libraries.yml

toolbar:
  version: VERSION
  css:
    theme:
      css/toolbar.css: {}