put label of appBar button beside the icon image instead of below the icon image

Question

First, I'd be a bit wary of changing the default behavior in such a way, since it will deviate from the experience that the user will have with most other applications on the platform. That said, I think it should be doable, in at least one way.

Here are a couple of approaches to consider, not that I consider any 'optimal', but they may be you a place to start:

Looking at the structure of the generated object (you can use Interactive Mode in Blend) you can see the command is two stacked span tags (one containing the icon and circle, and the other the command text). From WinJS.UI.AppBar doc, you can style these spans, but since a span is an in-line element, I don't believe you'll can move it vertically so that it sits next to the button. You can play with margin-right and margin-left a bit though.

Now another option is to try rewriting the DOM that's generated so that you throw away the representation as span tags and build something yourself, but that's a lot of work with unknown fragility.

A third option is roughly the design-time equivalent of modifying the DOM. Instead of using the default behavior of AppBar, create a custom layout. For instance, the following markup (which is not production-quality, with in-line styles and all :)) produces the image that then follows:

    <div id="appbar" data-win-control="WinJS.UI.AppBar" data-win-options="{layout: 'custom'}">
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd',  icon:'placeholder'}" type="button"></button>
    <span style="margin-left: -28px; font-size: 0.8em">Command 1</span>
    <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'cmd',  icon:'placeholder'}" type="button"></button>
    <span style="margin-left: -28px; font-size: 0.8em">Command 2</span>
</div>

enter image description here

There is an AppBar sample on the Windows Dev Center that may help you as well if you go the custom route.