Search code examples
cssmudblazor

MudBlazor: How can I align a MudIcon so that it aligns with a MudText?

In MudBlazor what is the cleanest way to align a MudIcon with some corresponding MudText.

{
  <CardHeaderContent>
     <MudText Typo="Typo.h6" Align="Align.Center">
       <MudIcon Icon="@Icons.Material.Filled.Business" Title="Favorite" /> Company Details
      </MudText>
  </CardHeaderContent>
}

The above icon doens't align with the text.

?

Solution

  • As you have the MudIcon as a child content of MudText, then you can turn the MudText into a flexbox using d-flex and align it using align-center.

    <CardHeaderContent>
    <MudText Typo="Typo.h6" Class="d-flex align-center justify-center">
        <MudIcon Icon="@Icons.Material.Filled.Business" Title="Favorite" /> Company Details
    </MudText>
</CardHeaderContent>