Add icon to module's menu item in Administration menu

Question

I've searched for a bit and I haven't found a solution to my liking: I want to avoid adding more modules to the project.

I'm very new to Drupal, so I have minimal knowledge on that matter. I have this project which somebody else has made. They created a module which adds a menu item on the Administration menu. What this module doesn't do, is add an icon to the menu item, which makes it look bare.

I want to add a custom icon I've made next to the menu item text. The reason it needs to be a custom icon and can't be fontawesome (or anything of its liking), is because it has to be a variation of the site logo.

Is there a way to accomplish this without adding more modules to the project, or is adding more modules the only way?

It's Drupal 8 with Lightning on Debian 9 with Apache2.4 and PHP7.2.

Answer 1

I figured it out. Now, this might not be the very best way to solve it, and some things should probably be changed, but this will be fine for now. Let's assume the module name is pizza.

First, create a directory called css. Inside this folder, create a css file with the name of the module. In this case it would be pizza.css. Since there needs to be an icon next to the module's menu item title on the administration menu, this is the CSS we'll need (or similar):

.toolbar-icon-pizza-main::before{
    background-image: url('../../../../../sites/default/files/pizza-icon.png');
}

Second, we will need a libraries file in the module's root (where pizza.info.yml is located); call it pizza.libraries.yml. Inside this file write something along the lines of this:

toolbar-icon:
  version: 1.0
  css:
    base:
      css/pizza.css: {}

Here, base probably should be changed to theme, since this is an aesthetic to the module.

Third, move into pizza.info.yml, we need to include the library we made into the module. Add this to the bottom:

libraries:
  - pizza/toolbar-icon

Fourth, move into pizza.module, where we're going to add this:

/*
 * Implements hook_toolbar_alter()
 */
function pizza_toolbar_alter(&$items) {
  $items['administration']['#attached']['library'][] = 'pizza/toolbar-icon';
}

This fixed it for me. Source: https://www.drupal.org/docs/8/creating-custom-modules/adding-stylesheets-css-and-javascript-js-to-a-drupal-8-module