Using Custom Icons in SilverStripe CMS Menu and Elemental Blocks

By default, SilverStripe CMS uses Font Icons for menu, and at times, you would want to set your own custom SVG icons when there isn’t a sufficient icon and/or to be inline with your org brand guidelines. This article explains how can set those, in both cases — For use in CMS classes that extend ModelAdmin, and in the case of Elemental Blocks that extend BaseElement.

CMS Menu Custom Icon Setup

For CMS Menu (ModelAdmin), this is more straightforward, just set the image like so:

class ProgressBarModelAdmin extends ModelAdmin

{
    private static $menu_icon = '/_resources/vendor/abc/abc-elemental-progress-bar/images/progress-bar-icon-white.svg';
}

BaseElement Custom Icon Setup

As for Elemental Blocks that extend the BaseElement class, the only way to achieve that is via a CSS class. This is because, as per the API docs, you can only assign an Icon a CSS class.

Step 1 — Vendor expose Images and CSS

{
  "extra": {
    "expose": [
      "images",
      "css"
    ]
}

Step 2 — Update Element Icon Class

class ProgressBarElement extends BaseElement {
  private static $icon = 'progress-bar-icon';
}

Step 3 — Add Custom CMS Stylesheet

Add ~/vendor/abc/abc-elemental-progress-bar/css/custom-cms-styles.css and then set the background image in CSS, and adjust spacing to get alignment right:

.progress-bar-icon {
  background: url(/_resources/vendor/abc/abc-elemental-progress-bar/images/progress-bar-icon-grey.svg);
  background-repeat: no-repeat;
  background-position: 1rem;
  background-size: 1.5rem;
  padding-left: 3.75rem;
}

Step 4 — Import Stylesheet in Module Config

In ~/vendor/abc/abc-elemental-progress-bar/_config/config.yml add:

SilverStripe\Admin\LeftAndMain:
  extra_requirements_css:
    _resources/vendor/abc/abc-elemental-progress-bar/css/custom-cms-styles.css