Change Material 2 tab width without affecting tabs in parent component? - css

Question

I have a child search component on every view that has tabs. Since these tabs only have icons in the tab label I have to style them to have a smaller width.
I found something that works:
/deep/ .mat-tab-label {
min-width: 80px !important;
}
However, this also affects the tabs in the parent component but without the /deep/ and !important the tabs don't change their width.
I've tried using all forms of ViewEncapsulation but none of them get the job done.
The tab structure is basically this:
<md-tab-group [selectedIndex]="selectedTabIndex">
<md-tab>
<ng-template md-tab-label><i class="fa fa-users"></i> {{'common_users' |
translate | capitalize}}
</ng-template>
<search-component></search-component>
</md-tab>
</md-tab-group>
The search component also has tabs in it:
<md-tab-group>
<md-tab>
<template md-tab-label>
<i class="fa fa-search" mdTooltip="{{'common_simplesearch' | translate | capitalize}}"></i>
</template>
<div fxLayout="column">
<form>
<md-input-container
*ngFor="let option of simpleSearchOptions; let i = index; let last = last" fxFlex="100%"
style="margin-right: 10px; margin-top: 5px;">
<input mdInput
type="text"
[(ngModel)]="option.value"
name="searchQuery{{i}}">
</md-input-container>
<div fxlayout="row">
<button md-raised-button mdTooltip="{{'common_search' | translate | capitalize}}" color="primary"
type="submit"
(keypress)="onEnter($event, searchSet)"
(click)="search(searchSet)">
{{'common_search' | translate | capitalize}}
</button>
<button *ngIf="canClear != false" md-raised-button mdTooltip="{{'common_clearSearch' | translate |
capitalize}}" (click)="clearSearch()"><i class="fa fa-eraser"></i>
</button>
</div>
</form>
</div>
</md-tab>
<md-tab>
<template md-tab-label>
<i class="fa fa-search-plus" mdTooltip="{{'common_advancedsearch' | translate | capitalize}}"></i>
</template>
<div fxlayout="column">
<form (ngSubmit)="search(searchSet)">
<div *ngFor="let searchItem of searchSet.searchItems; let i = index; let first = first; let last = last">
<md-select [ngModel]="searchItemType[i]"
(change)="onSearchTypeChange(searchItem, i)"
name="searchBy{{i}}" fxFlex="100">
<md-option [value]="stringify(option)" *ngFor="let option of searchOptions">{{option.display | translate |
capitalize}}
</md-option>
</md-select>
<div *ngIf="searchBy == 'identifier'">
<md-select [(ngModel)]="searchItem.key" name="idType" fxFlex="100">
<md-option *ngFor="let option of tokenSearchOptions" [value]="option">{{option | translate | capitalize}}
</md-option>
</md-select>
</div>
<md-select [(ngModel)]="searchItem.modifier" name="searchType{{i}}" fxFlex>
<md-option [value]="modifier.value" *ngFor="let modifier of searchModifiers[i]; let i = index">
{{modifier.display | translate |
capitalize}}
</md-option>
</md-select>
<md-input-container fxFlex="100">
<input mdInput
type="text"
placeholder="{{'common_search' | translate | capitalize}}"
[(ngModel)]="searchItem.value"
name="searchQuery{{i}}">
</md-input-container>
<a class="btn btn-alert btn-lg" (click)="addSearchItem()" [hidden]="!last">
<i class="ion-ios-plus-outline"></i>
</a>
<a class="btn btn-alert btn-lg" (click)="removeSearchItem(searchItem)" [hidden]="first || !last"><i
class="ion-ios-minus-outline"></i></a>
</div>
<button md-raised-button color="primary"
[disabled]="!searchSet.searchItems[0].key || !searchSet.searchItems[0].modifier || !searchSet.searchItems[0].value"
(keypress)="onEnter($event, searchSet)" (click)="search(searchSet)">{{'common_search' |
translate
| capitalize}}
</button>
<button md-raised-button (click)="clearSearch()">{{'common_clearSearch' | translate |
capitalize}}
</button>
</form>
</div>
</md-tab>
<md-tab>
<template md-tab-label>
<i class="fa fa-bookmark-o"></i>
</template>
Saved searches
</md-tab>
</md-tab-group>
How can I style the tabs only in the child component without affecting the parent?