title: Android: Toolbar Tablayout, icons rendering above text
body: <p>I have a simple Layout in a Dialog with a <code>AppCompat Toolbar</code> and <code>TabLayout</code> inside. I want my tabs to have icons left of text.  </p>
  
  <blockquote>
    <p>Here is a layout of the dialog.</p>
  </blockquote>
  
  <p></p>
  
  <pre><code>    &lt;android.support.v7.widget.Toolbar
              android:id="@+id/toolbar"
              android:layout_height="wrap_content"
              android:layout_width="match_parent"
              &gt;
  
          &lt;android.support.design.widget.TabLayout
                  android:id="@+id/tabs"
                  android:layout_width="match_parent"
                  android:layout_height="wrap_content"
                  app:tabMode="fixed"
                  app:tabGravity="fill"
                  /&gt;
      &lt;/android.support.v7.widget.Toolbar&gt;
  
      &lt;ListView
              android:id="@+id/list"
              android:layout_width="match_parent"
              android:layout_height="fill_parent"
              /&gt;
  &lt;/LinearLayout&gt;
  </code></pre>
  
  <p>then I programatically add the tabs.</p>
  
  <pre><code>tabs.addTab(tabs.newTab()
                  .setTag(SettingsTabTag)
                  .setText("Settings")
                  .setIcon(R.drawable.scan_tab_settings_black), true);
  tabs.addTab(tabs.newTab()
                  .setTag(MetadataTabTag)
                  .setText("Metadata")
                  .setIcon(R.drawable.scan_tab_metadata_black));
  </code></pre>
  
  <p><strong>But the icon is always rendering above the text and a very small.</strong></p>