title: How make an notification icon in actionbar using nativescript?
body: <p>I'm new to NativeScript with Angular and I would like to make a notification icon in the action bar. Below is my desire position and look of an icon.</p>
  
  <p><a href="https://i.stack.imgur.com/RLTi5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/RLTi5.png" alt="enter image description here"></a></p>
  
  <p>I have successfully make the same position by learning the example in below playground project.</p>
  
  <p><a href="https://i.stack.imgur.com/5MPR1.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5MPR1.png" alt="enter image description here"></a></p>
  
  <p><a href="https://play.nativescript.org/?template=play-ng&amp;id=vCppC6&amp;v=4" rel="nofollow noreferrer">Project ref#</a></p>
  
  <p>but my output is like:</p>
  
  <p><a href="https://i.stack.imgur.com/5Yqjx.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5Yqjx.png" alt="enter image description here"></a></p>
  
  <p>there is the bell font icon which is not showing there. I have highlighted its position using the rectangular background color so it easy to understand where I want this icon. The other dot label is showing in the right position. But I'm unable to show my notification bell icon before the dot icon. Below is my code please tell me what I m doing wrong in my code and how I can my notification bell icon before the dot label.</p>
  
  <p><strong>dashboard.component.html</strong></p>
  
  <pre><code>&lt;ActionBar class="action-bar" flat="true"&gt;
      &lt;!-- 
      Use the NavigationButton as a side-drawer button in Android
      because ActionItems are shown on the right side of the ActionBar
      --&gt;
      &lt;NavigationButton ios:visibility="collapsed" icon="res://menu" (tap)="onDrawerButtonTap()"&gt;&lt;/NavigationButton&gt;
      &lt;!-- 
      Use the ActionItem for IOS with position set to left. Using the
      NavigationButton as a side-drawer button in iOS is not possible,
      because its function is to always navigate back in the application.
      --&gt;
      &lt;ActionItem icon="res://navigation/menu" android:visibility="collapsed" (tap)="onDrawerButtonTap()"
          ios.position="left"&gt;
      &lt;/ActionItem&gt;
      &lt;GridLayout width="100%" rows="auto" columns="*,50,auto"&gt;
          &lt;Label col="0" row="0" class="action-bar-title" text="Dashboard"&gt;&lt;/Label&gt;
          &lt;StackLayout col="1" row="0" rowSpan="2" class="ah-notification" backgroundColor="#44557f"&gt;
              &lt;Label text="&amp;#xf0f3;" class="fa ah-bell"&gt;&lt;/Label&gt;
          &lt;/StackLayout&gt;
          &lt;Label col="1" row="0" text="&amp;#xf192;" class="fa ah-dot"&gt;&lt;/Label&gt;
          &lt;!-- &lt;Image col="1" row="0" horizontalAlignment="right" marginRight="10" class="status-img" src="res://chat"&gt;&lt;/Image&gt; --&gt;
          &lt;Image col="2" row="0" horizontalAlignment="right" marginRight="10" class="status-profile" src="res://chat"&gt;&lt;/Image&gt;
      &lt;/GridLayout&gt;
  
  &lt;/ActionBar&gt;
  
  &lt;GridLayout class="page page-content"&gt;
      &lt;Label class="page-icon fa" text="&amp;#xf015;"&gt;&lt;/Label&gt;
      &lt;Label class="page-placeholder" text="&lt;!-- Page content goes here --&gt;"&gt;&lt;/Label&gt;
  &lt;/GridLayout&gt;
  </code></pre>
  
  <p><strong>dashboard.component.scss</strong></p>
  
  <pre><code>.ah-notification {
      width: 30;
      height: 30;
  
      .ah-bell {
          width: 30;
          height: 30;
          border-radius: 6;
          stretch: aspectFill;
          font-size: 15px;
          // margin-top: -10;
      }
  }
  .ah-dot {
      width: 12;
      height: 12;
      background-color: #49494b;
      border-width: 2;
      border-radius: 25;
      border-color: #49494b;
      vertical-align: top;
      horizontal-align: center;
      margin-top: 43;
      z-index: 21 // margin-left: -50;
  }
  </code></pre>