1

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.

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);
}
  • 1
    Yeah I know, but is this the way to go? I think that the changes will be overwritten when Drupal gets updated. – stijn.aerts Apr 22 '16 at 8:26
  • That's true. It's possible that Seven will get updates that may break the theme. Only Stable theme will not be changed if I recall correctly. There isn't really much to do about that. – mradcliffe Apr 22 '16 at 10:21
  • @mradcliffe safer way – No Sssweat Dec 4 '18 at 15:56
1

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.

0

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: {}

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.