[RFC] Simplify the usage of icon buttons

[capdiem]

Discussed in https://github.com/masastack/MASA.Blazor/discussions/1854

^{Originally posted by **capdiem** April 16, 2024} ## 概述 简化图标按钮的使用 ## 基本示例 ```razor Right Text Left Text ``` ## 动机 目前编写一个图标按钮需要写组合 **MButton** 组件和 **MIcon** 两个组件，使用成本比较高： ```razor mdi-star ``` Vuetify3 也为此做了优化： ```javascript ``` ## 设计细节 Vuetify3 v-btn 中的 icon 的类型是 `bool | string`。对于 MasaBlazor，内置的 `StringBoolean` 类型也可以同时表示 `bool | string`。然而当 _Icon_ 参数类型为 `StringBoolean` 时，razor 无法分析 ``这样的代码，razor 只能读懂 ``，这意味此改动会是一个破坏性更改。但是这样的代码自项目开始就已经存在，无法估计影响的范围，因此不能改动目前的 _Icon_ 属性的类型。 那么只能通过新增属性来实现。思来想去，似乎只有 _IconName_ 这个命名比较合适。当 _IconName_ 设置时，默认设置 _Icon_ 属性为 `true`。 其他包含图标组件的用法： ```razor mdi-star Right Text simplify: Right Text ``` ```razor Left Text mdi-star simplify: Left Text ``` 为此，也应该新增 _LeftIconName_ 和 _RightIconName_ 属性来简化以上代码的用法。 ## 缺点 新的 _IconName_ 属性可能会和旧的 _Icon_ 属性语义上有点模糊不清。 ## 替代方案 无 ## 未解决的问题 新属性的命名可能不够好。