How to make tabs of material2 to use the full page size

advertisements

I want to create tab group having two tabs. Tab group should use the full page size and the individual tab should get equal width. Following is code that I am using

<md-tab-group fxFlexFill>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon>description</md-icon> Content Privileges
        </ng-template>
        Content Privileges
    </md-tab>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon>flash_on</md-icon> Application Privileges
        </ng-template>
        Application Privileges
    </md-tab>
</md-tab-group>

And here is the output of above

Tabs are not using the full width. And label icon and text is not aligned.

How can I do that?


For alignment Problem: I just use vertical-align:middle; in md-icon and changed div with span. Its seems working.

<div>
  <md-tab-group >
    <md-tab>
        <ng-template md-tab-label>
            <md-icon style="vertical-align:middle;">description</md-icon>
            <span class="title">Content Privileges</span>
        </ng-template>
        Content Privileges
    </md-tab>
    <md-tab>
        <ng-template md-tab-label>
            <md-icon style="vertical-align:middle;">flash_on</md-icon>
            <span class="title">Application Privileges</span>
        </ng-template>
        Application Privileges
    </md-tab>
  </md-tab-group>
</div>