Rotate icon in MudBlazor

Question

I am using blazor .net 8 with MudBlazor for UI. I have Button with Start/End icon and i want to Rotate that icon How Can i?

 <MudButton Color="Color.Info" OnClick="@(e => { Share("G"); })" EndIcon="@Icons.Material.Filled.IosShare">
     Share
 </MudButton>

This is my Button with Icon how can i rotate icon to 45 degree or 90 degree.... Any guidance or suggestions would be greatly appreciated.

Answer 1

You can use the IconClass property to set your own class for the icon.

As for the CSS you can use transform property.

<style>
    .rotate-icon-45{
        transform: rotate(45deg);
    }
    .rotate-icon-90{
        transform: rotate(90deg);
    }
</style>
<MudButton Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.IosShare" Color="Color.Primary">ShareNormal</MudButton>
<MudButton IconClass="rotate-icon-45" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.IosShare" Color="Color.Primary">Share45</MudButton>
<MudButton IconClass="rotate-icon-90" Variant="Variant.Filled" StartIcon="@Icons.Material.Filled.IosShare" Color="Color.Primary">Share90</MudButton>

Demo 👉 MudBlazor snippet