xul:menuitem 要素へアイコンの画像を表示させたい場合、menuitem-iconic クラス を付与して src 属性に画像の URI を指定すれば良い。この方法は xul:menu 要素や xul:toolbarbutton 要素 （type=”menu”） 配下に xul:menuitem 要素を置く場合であれば、うまく動作する。

<menu label="MENU">
  <menupopup>
    <menuitem class="menuitem-iconic" label="MENUITEM" src="http://www.mozilla.com/favicon.ico" />
  </menupopup>
</menu>

<toolbarbutton type="menu" label="TOOLBARBUTTON" >
  <menupopup>
    <menuitem class="menuitem-iconic" label="MENUITEM" src="http://www.mozilla.com/favicon.ico" />
  </menupopup>
</toolbarbutton>

ところが xul:menulist 要素配下に xul:menuitem 要素を置く場合、 xul:menupopup 要素のドロップダウンリスト中ではアイコンの画像が表示されない。

<menulist>
  <menupopup>
    <menuitem class="menuitem-iconic" label="２ちゃんねる"   src="http://www.2ch.net/favicon.ico" />
    <menuitem class="menuitem-iconic" label="PINKちゃんねる" src="http://www.bbspink.com/favicon.ico" />
    <menuitem class="menuitem-iconic" label="まちBBS"        src="http://www.machibbs.com/favicon.ico" />
    <menuitem class="menuitem-iconic" label="したらば"       src="http://jbbs.livedoor.jp/favicon.ico" />
  </menupopup>
</menulist>

ドロップダウンリスト中にも画像を表示させるには、 chrome://browser/skin/feeds/subscribe.css を参考にして以下のような CSS を適用してやる。下記の例ではついでにサイズの大きな画像を 16×16 px に縮小させている。

menulist menupopup > menuitem {
  -moz-padding-start: 23px;
}

menulist menupopup > menuitem.menuitem-iconic {
  -moz-padding-start: 2px;
}

menulist menupopup > .menuitem-iconic > .menu-iconic-left {
  display: -moz-box;
  min-width: 16px;
  -moz-padding-end: 2px;
}

menulist .menulist-icon,
menulist menupopup > .menuitem-iconic > .menu-iconic-left > .menu-iconic-icon {
  width: 16px;
  height: 16px;
}