How do I change icons in the "Mobile sliding menu" module? I want to change the menu-item icons for the Mobile sliding menu module. I have set up the icomoon library and changed the CSS file according to the documentation. I have added custom icon classes to the menu items (which works as long as they are not as block in a mmenu). The mmenu always overwrites this with its own markup. 

I have found some occurrences of menu icon assignments in the source code, but I don't want to hack modules.

mmenu.api.php describes some hooks.

/**
* Allows modules to add more mmenu icon classes.
*/
function hook_mmenu_icon() {
  $icons = array(
    'path' =&gt; array(
      'home' =&gt; 'icon-home',
      'about' =&gt; 'icon-office',
      'contact' =&gt; 'icon-envelope',
    ),
    'block' =&gt; array(
      array(
        'module' =&gt; 'system',
        'delta' =&gt; 'main-menu',
        'icon_class' =&gt; 'icon-enter',
      ),
    ),
  );
  return $icons;
}

/**
 * Allows modules to alter mmenu icon class settings.
 */
function hook_mmenu_icon_alter(&amp;$icons) {
  $icons['path']['home'] = 'icon-home1';
}


I have no clue how to use these. I have tried to put them in my template.php like this.

function mythemename_mmenu_icon() {...}


It's not working. Apart from that, this wouldn't be a user-friendly solution. Ideally it would support icon-api. So any help is highly appreciated.
Here is what I ended up with, after using hook_mmenu_icon() and configuring the Icon API to use the icomoon bundle.



How I did it?

First of all, I opted for using the Icomoon module, which allows me to import my own defined icons collections, assembled using the icomoon app.

This is an example of a custom collection I created (and the renaming/mapping of icons to the menu points I had in mind).



After, I had to go to the administration interface of Icon API providers and import the icons (/admin/config/media/icon/import). I named the imported bundle 'icomoon', which will be important for the code I wrote. This is what that admin interface looked like.



The code

The code you need will use hook_mmenu_icon(), since you want to define your own path to icon class associations.

This is what my code looks like.

/**
* Implements hook_mmenu_icon().
*
* Here we map URLs to icon classes.
*/
function YOUR_CUSTOM_MODULE_mmenu_icon() {
  $icons = array(
    'path' =&gt; array(
      'home' =&gt; 'icon-home',
      'node/1' =&gt; 'icon-node1',
    ),
  );
  _inject_inline_css($icons);
  return $icons;
}


Notice the use of Drupal's internal paths as the key to the $icons array. This is needed by the module (inside mmenu_get_icon_class()) in order to assign our custom CSS class to the menu item that points to it.

The rest of the code is quite custom and just a random idea of how you could go about doing the assignments you need. Probably there are better approaches.

/**
 * Function for injecting Icon API icons as CSS background images.
 */
function _inject_inline_css($icons) {
  // Load a bundle provider from the Icon API.
  $bundle = icon_bundles('icomoon');

  // Sanitization, normalization.
  if (empty($bundle)) {
    return;
  }
  if (!isset($bundle['settings']['extension'])) {
    $bundle['settings']['extension'] = 'png';
  }

  $css_data = array();

  // Configure an existing icon class, 'home'.
  $icon_path = $bundle['path'] . '/' . strtoupper($bundle['settings']['extension']) . '/home' . '.' . $bundle['settings']['extension'];
  $icon_info = image_get_info($icon_path);
  $icon_url = file_create_url($icon_path);
  $css_data[$icons['path']['home']] = array(
    'background-image' =&gt; 'url("' . $icon_url . '")',
    'background-size' =&gt; 'contain',
    // Or, as an alternative.
    // 'background-size' =&gt; '$icon_info['width'] . 'px ' . $icon_info['height'] . 'px'',      
    'background-repeat' =&gt; 'no-repeat',
    'background-position' =&gt; 'center',
  );

  // Add a custom icon class, 'node/1'.
  $icon_path = $bundle['path'] . '/' . strtoupper($bundle['settings']['extension']) . '/node1' . '.' . $bundle['settings']['extension'];
  $icon_info = image_get_info($icon_path);
  $icon_url = file_create_url($icon_path);
  $css_data[$icons['path']['node/1']] = array(
    'background-image' =&gt; 'url("' . $icon_url . '")',
    'background-size' =&gt; 'contain',
    // Or, as an alternative.
    // 'background-size' =&gt; '$icon_info['width'] . 'px ' . $icon_info['height'] . 'px'',      
    'background-repeat' =&gt; 'no-repeat',
    'background-position' =&gt; 'center',
  );

  // Generate and add inline CSS, mapping the mmenu icon classes to the icomoon icons.
  $css_string = '';
  foreach ($css_data as $class =&gt; $css_properties) {
    $css_string .= '.' . $class . ' {';
    foreach ($css_properties as $css_property =&gt; $css_value) {
      $css_string .= "$css_property: $css_value;";
    }
    $css_string .= '}';
  }
  drupal_add_css($css_string, array('type' =&gt; 'inline'));
}