Rohit Azad Rohit Azad - 4 months ago 24
AngularJS Question

how to add icon in tab in angular js >

Hi I am new at angular js,

my question is how to add an icon to a tab in angular js?
That's what I have so far:

<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
<tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
<tab heading="Tab 2 ded">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
</tab>
</tabset>


I'm adding
<tab heading="Tab 2 ded <span class="icon-print">print</span>">


but it shows everything exactly as written inside the heading instead of rendering the span as I would exspect..

Please help me.

Answer

I assume you are using angular-ui bootstrap. Use tab-headingdirective and put your icon there.

<tabset panel-tabs="true" panel-class="{{demoTabbedPanelClass}}" heading="{{demoTabbedPanelHeading}}">
  <tab heading="Tab 1 some text ">sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
  <tab>
    <tab-heading>
      <i class="icon-print"></i> Tab 2 ded
    </tab-heading>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tenetur ipsam consectetur sint. Nobis facere illo iste quaerat sapiente doloribus deserunt et nam obcaecati recusandae possimus aperiam similique.</p>
  </tab>
</tabset>