Add IconTemplate for menu item

[Guyiming]

🤔 This is a ...

• New feature
• Bug fix
• Site / documentation update
• Demo update
• Component style update
• Bundle size optimization
• Performance optimization
• Refactoring
• Code style optimization
• Test Case
• Branch merge
• Other (about what?)

🔗 Related issue link

没有Issue

💡 Background and solution

考虑有如下代码：

<Menu Theme="MenuTheme.Dark" DefaultSelectedKeys=@(new[]{"1"}) Mode="MenuMode.Inline">
            <MenuItem Key="1" Icon="pie-chart">
                <MenuLink Href="" Match="NavLinkMatch.All">AA</MenuLink>
            </MenuItem>
            <MenuItem Key="2" Icon="desktop" RouterLink="systemctl" Title="BB">
            </MenuItem>
            <MenuItem Key="3">
                <IconFont Type="icon-c-sharp-l"></IconFont>
                <MenuLink Href="codeformat">CC</MenuLink>
            </MenuItem>
            <MenuItem Key="4">
                <Icon Type="desktop"></Icon>
                <MenuLink Href="fetchdata">DD</MenuLink>
            </MenuItem>
</Menu>

由于定义的CSS样式约束，缩起来时会产生如下不统一的效果：

☑️ Self Check before Merge

⚠️ Please check all items below before review. ⚠️

• Doc is updated/provided or not needed
• Demo is updated/provided or not needed
• Changelog is provided or not needed

[github-actions]

[ElderJames]

I prefer to add an IconTemplate for menu item so that you can add custom icons such as images, font icons etc.

[Guyiming]

@ElderJames Hi, James. You mean like this?

<CascadingValue Value="this" IsFixed>
    <Tooltip Title="@content(this)" Placement="@PlacementType.Right" Disabled="TooltipDisabled">
        <Unbound>
            <li class="@ClassMapper.Class" role="menuitem" style=" @(PaddingLeft>0? $"padding-left:{PaddingLeft}px;":"") @Style" @onclick="HandleOnClick" @key="Key" @ref="context.Current">

                @if (IconTemplate != null)
                {
                    @IconTemplate
                }
                else if (Icon != null)
                {
                    <Icon Type="@Icon" />
                }

                @if (RouterLink == null)
                {
                    @content(this)
                }
                else
                {
                    <MenuLink Href="@RouterLink" Match="@RouterMatch">@content(this)</MenuLink>
                }
            </li>
        </Unbound>
    </Tooltip>
</CascadingValue>

Or you can write down your thoughts, maybe I can help implement them.

[ElderJames]

@Guyiming That's right.

[Guyiming]

@ElderJames Ok, I will close this PR, and make a new one.

[ElderJames]

@Guyiming No need to close this PR, you can continue to commit to this branch.

[Guyiming]

@Guyiming No need to close this PR, you can continue to commit to this branch.

Done

[codecov]

Codecov Report

Merging #1879 (04dd50b) into master (e106606) will increase coverage by 23.56%.
The diff coverage is 0.00%.

@@             Coverage Diff             @@
##           master    #1879       +/-   ##
===========================================
+ Coverage    0.00%   23.56%   +23.56%     
===========================================
  Files         478      495       +17     
  Lines       31211    23250     -7961     
  Branches        0      121      +121     
===========================================
+ Hits            0     5479     +5479     
+ Misses      31211    17768    -13443     
- Partials        0        3        +3     

Impacted Files	Coverage Δ
components/menu/MenuItem.razor	0.00% <0.00%> (ø)
components/menu/MenuItem.razor.cs	0.00% <0.00%> (ø)
components/card/Card.razor	0.00% <0.00%> (ø)
components/form/Form.razor	0.00% <0.00%> (ø)
components/rate/Rate.razor	0.00% <0.00%> (ø)
components/spin/Spin.razor	0.00% <0.00%> (ø)
components/tree/Tree.razor	0.00% <0.00%> (ø)
components/menu/MenuLink.cs	0.00% <0.00%> (ø)
components/menu/MenuMode.cs	0.00% <0.00%> (ø)
components/steps/Step.razor	0.00% <0.00%> (ø)
... and 439 more

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update e106606...04dd50b. Read the comment docs.

[ElderJames]

LGTM

[knight1219]

Is the IconTemplate working with the Collapse feature? I have the following menu and when collapsed I still see the text (I have more menu items but this is my static menu):

<Menu Theme="MenuTheme.Dark" DefaultSelectedKeys=@(new[]{"1"}) Mode="MenuMode.Inline"> <MenuItem Key="1" RouterLink="/"> <IconTemplate> <i class="fas fa-home"></i> </IconTemplate> <ChildContent> <span>Home</span> </ChildContent> </MenuItem> </Menu>
Expanded

Collapsed

[Guyiming]

@knight1219 try wrap your <i class="fas fa-home"></i> with <span>

[knight1219]

Tried a span, didnt work. I went to the demo and pulled out the span that the Icon control creates and used that and it works.

<span role="img" class=" anticon anticon-container"> <i class="fas fa-home"></i> </span>

Should the IconTemplate RenderFragment be wrapped in this span from within the component so users don't have to try and worry about this and it "just works"?

[anddrzejb]

@knight1219 Would you like to open a PR for that fix?

[knight1219]

I could do that sure. It will be this weekend before I can dedicate any some time to it.

[anddrzejb]

No problem. Any help is appreciated.

[knight1219]

I had some time tonight so here is that PR #2006. It's my first one (ever), so be gentle