jquery mobile external panel not taking on styling

Question

I am trying to implement the new external panel offered in jQuery mobile 1.4 rc1. I am able to get the panel to enter and dismiss across all pages as it should, however the

Answer 1

Note: data-theme attribute should be added to External panel as it doesn't inherit style/theme from parent container. Internal panel inherit styles/theme from page div containing it.

jQuery Mobile now offer external panel and toolbar. Those widgets aren't being initiated automatically by jQM. They need to be initiated manually and followed by .enhanceWithin() to enhace contents within.

$(function () {
  $("[data-role=panel]").panel().enhanceWithin();
});

Demo

Answer 2

I'm not allowed to comment but in the demo @Omar provide the many data-icon="home" icons are not showing up and if I add class="ui-btn ui-icon-arrow-l" to the Anchor, it doesn't show up either so there appears to be something more that needs to be done.

With a little investigation, I found that adding adding ui-btn-icon-left like so will fix anchors

<a href="#" class="ui-btn ui-icon-arrow-l ui-btn-icon-left">Anchor</a>

adding these classes to the <li data-icon="home" doesn't quite work but changing <li data-icon="home">item</li> to <li class="ui-btn ui-icon-home ui-btn-icon-left ui-corner-all">item</li> will get the icon to show up but will not move the text over so it still looks bad.