What the component renders with the 'icon' attribute is just the following markup (assuming that icon="envelope"):

<i class="fa fa-envelope"></i>

If we want to render a bigger envelope icon that has a red circle in the middle, which in turns contains a number 9 (e.g. the number of e-mails), then the following markup is required.

<span class="fa-stack fa-lg">
	<i class="fa fa-envelope-o fa-stack-2x"></i>
	<i class="fa fa-circle fa-stack-1x" style="color:red;"></i>
	<strong class="fa fa-stack-1x" style="color:white;">9</strong>
</span>

So, for this improvement, an attribute that allows to specify arbitrary HTML markup would be the most appropriate solution. Simply using the body of the component to specify this markup is also an appropriate solution.

r51961: added 'icon' facet to mobi:contentMenuItem, to render instead of the 'icon' attribute, allowing for more complex icons

i took the facet from the Jira and put it on mobitest/layout/contentStackMenu/contentStackMenu4.jsf
page.

I cannot get the facet to render. When I go through the debugger I noticed that the code path for the facet does not get used when this page is rendered. Also, the facet is not encoded unless iconPlacement is non-null.
I added the iconPlacement attribute, but still not getting the facet to render.

here is the snippet on that page I added for largeView
<mobi:largeView>
<mobi:splitPane columnDivider="30">
<f:facet name="left">
<h:form>
<mobi:contentStackMenu id="contentStackMenu" contentStackId="contentStack">
<mobi:contentMenuItem label="Menu"/>
<mobi:contentMenuItem label="Page 1" value="page1" iconPlacement="right"
icon="envelope">
<f:facet name="icon">
<span class="fa-stack fa-lg">
<i class="fa fa-envelope-o fa-stack-2x"></i>
<i class="fa fa-circle fa-stack-1x" style="color:red;"></i>
<strong class="fa fa-stack-1x" style="color:white;">9</strong>
</span>
</f:facet>
</mobi:contentMenuItem>
<mobi:contentMenuItem label="Page 2" value="page2"/>
<mobi:contentMenuItem label="Page 3" value="page3"/>
</mobi:contentStackMenu>

</h:form>
</f:facet>
<f:facet name="right">
<mobi:contentStack id="contentStack" contentMenuId="contentStackMenu"
currentId="#

">
<mobi:contentPane id="page1" client="true" >
<h:form>
<h2>Page 1</h2>
<mobi:contentStackFormProxy/>
</h:form>
</mobi:contentPane>
<mobi:contentPane id="page2" client="true">
<h2>Page 2</h2>
<mobi:contentStackFormProxy/>
</mobi:contentPane>
<mobi:contentPane id="page3" client="true">
<h2>Page 3</h2>
<mobi:contentStackFormProxy/>
</mobi:contentPane>
</mobi:contentStack>
</f:facet>
</mobi:splitPane>

</mobi:largeView>

mobitest sample is under jsf/components/tests folder.

the code path for icon in this example is executed at line 285 in the ContentMenuItemRenderer and the facet is not checked here. Might want to refactor that and have the check done in both code paths?

The icon facet is actually working for me, as seen in the screenshot. I just copy/pasted the facet markup and put it inside the 'Page 1' content menu item.

The iconPlacement and icon attributes are actually not necessary when using the facet, but the facet will still be displayed if those attributes are declared, since it overrides the icon attribute.

I tested this on Chrome, FF, and Edge.

This was only committed to http://dev.icesoft.com/svn/ossrepo/icemobile/trunk/icemobile

Did it have to be committed somewhere else?