From f99a8abd80edb211970199087a295b499c82204e Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Wed, 7 Dec 2022 08:54:27 +0100 Subject: [PATCH] fix(material/tabs): icons not centered inside tab (#26053) Fixes that icons projected into a tab were centered anymore. Relates to https://github.com/angular/components/issues/26024#issuecomment-1320335400. --- src/material/tabs/_tabs-common.scss | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/material/tabs/_tabs-common.scss b/src/material/tabs/_tabs-common.scss index 52754cdd8a84..8a77ee416e07 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -53,6 +53,12 @@ $mat-tab-animation-duration: 500ms !default; pointer-events: none; } + // We support projecting icons into the tab. These styles ensure that they're centered. + .mdc-tab__text-label { + display: inline-flex; + align-items: center; + } + // Required for `fitInkBarToContent` to work. This used to be included with MDC's `without-ripple` // mixin, but that no longer appears to be the case with `static-styles`. Since the latter is // ~10kb smaller, we include this one extra style ourselves.