如果只看这两个方案，我会更倾向于 A。A 的处理方式，是把图标放在文字前面。B 的处理方式，则是把图标放在文字后面。得出这个结论并不是因为“A 更常见”，而是因为 A 在信息识别、视觉组织这两个层面上，都更合理一些。

1. 信息识别

对于一个标准操作按钮来说，图标放在文案前面，通常比放在文案后面更合适。原因在于，按钮最重要的任务不是做出变化，而是让用户快速明白这是什么、点下去会发生什么。

A 的结构是图标在前、文字在后。这种顺序更接近用户对按钮的自然识别路径。用户先看到一个具有动作意味的图标，再读到具体文案，很容易把这两部分合成为一个完整动作，也就是“编辑详情”。

B 的问题并不在于它完全错误，而在于它会让图标更像文案后面的附加信息，而不是按钮内容本身的一部分。这样一来，按钮的整体感会变弱，理解路径也会稍微绕一点。

所以，如果这是一个普通界面里的标准按钮，没有额外语义支撑，A 会是更稳妥的方案。

2. 视觉组织

界面中的排布不只是“好不好看”的问题，它还会影响控件给人的结构感。一个按钮如果内部组织得好，用户会把它看成一个整体动作。一个按钮如果内部关系处理得不够紧密，用户就更容易把它看成几个元素的拼接。

A 在视觉上更像一个完整按钮。图标出现在左边，相当于先接住视线，再把阅读引向文字。整个控件的内部节奏是从左向右展开的，视觉起点明确，识别过程也比较稳定。图标和文字之间形成的是一种自然的并列配合，而不是互相争抢重点。

B 则会把视觉重心向右拖。因为文案本身已经是按钮中的主要识别内容，右侧再放一个铅笔图标，用户的注意力就会在读完文字之后再次被拉向末尾。这样一来，按钮内部的节奏会显得有些分裂，图标也更像挂在句尾的一个标记，而不是和文案一起构成主信息。

这类做法并不是完全不能成立，但它更适合那些右侧元素本身就承担特殊角色的场景。比如列表项尾部的箭头、外链图标、展开符号，用户会自然把它们理解为方向、结果或附加状态。

显然铅笔图标并不属于这类图标。它不是方向性的，也不是状态性的，它表达的是主动作本身。既然如此，它放在句尾就很难占据一个合适的位置。换句话说，A 的问题更少，因为它让图标和文案共同服务于一个动作。B 则更容易让图标看起来像额外附加上去的东西。

3. B 成立的条件

虽然整体上 A 更优，但 B 并不是绝对不能用。只是它成立的前提更苛刻，需要额外语义来支撑。

第一种情况，是你的设计系统已经明确规定右侧图标承担某种固定角色。比如产品里所有按钮的右侧图标都表示结果方向、附加反馈，或者某种一致的系统语言，那么 B 可以成立。这里的关键不在于单个按钮，而在于整套系统是否已经把这条规则建立起来，并且在多个场景中持续重复。

第二种情况，是你在做一套有明显品牌风格的视觉语言，希望通过非常规排布制造差异感。这种设计并非不能出现，但它通常需要更强的整体风格支撑。如果只是局部把一个普通按钮改成 B，而周围界面仍然遵循常规逻辑，那么这种“变化”很可能不会被用户感知为风格，反而会显得很别扭。

第三种情况，是右侧图标本身属于方向型或状态型图标。例如箭头、展开符号、外链标记，它们天然适合放在后面，因为它们表达的不是主动作本身，而是后续走向、跳转关系或结果提示。但铅笔渲染不是这种图标。它表达的是编辑这个动作，所以放在后面，天然就没有箭头那样合理。

也就是说，B 不是完全错误，而是它需要额外条件才能成立。如果没有这些条件，A 仍然是更合理的标准答案。