How to correct icon alignment for an xe:toolBarButton in the actionFacet of the Page Heading?

Question

The following image shows proper alignment for the mblDomButtonWhitePlus icon for the xe:toolBarButton on the left, but not so good on the right in the xe:djxmHeading.

Here is the source for the Page Heading control:

    <xe:djxmHeading id="djxmHeading1" label="appPage1">
            <xe:toolBarButton id="toolBarButton3" moveTo="appPage2">
                <xe:this.dojoAttributes>
                    <xp:dojoAttribute name="icon" value="mblDomButtonWhitePlus">
                    </xp:dojoAttribute>
                </xe:this.dojoAttributes>
            </xe:toolBarButton>
            <xp:this.facets>
                <xe:toolBarButton id="toolBarButton4" moveTo="appPage3"
                    xp:key="actionFacet">
                    <xe:this.dojoAttributes>
                        <xp:dojoAttribute name="icon" value="mblDomButtonWhitePlus">
                        </xp:dojoAttribute>
                    </xe:this.dojoAttributes>
                </xe:toolBarButton>
            </xp:this.facets>
        </xe:djxmHeading>

Any ideas on how to correct the icon alignment for the xe:toolBarButton in the actionFacet of the Page Heading?

Answer 1

override .mblHeadingActionFacet div {top: 4px;} will drop the plus sign in place... you may need to change top pixels value based on how your div's are positioned (relative for example).