From a3b7f9a0868138f1c67efe8ed837634901ebb6a8 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Tue, 22 Nov 2022 10:32:52 +0100 Subject: [PATCH] fix(material/tabs): icons not centered inside tab 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 d853ee1387b3..7bcb2e28908d 100644 --- a/src/material/tabs/_tabs-common.scss +++ b/src/material/tabs/_tabs-common.scss @@ -51,6 +51,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.