这种方法直观易懂，适合需要动态修改图标的场景：

HTML结构 #

<button class="icon-btn">
  按钮文字
  <i class="corner-icon"></i>
</button>

CSS样式 #

.icon-btn {
  /* 给按钮设置相对定位，让内部绝对定位的图标以按钮为基准 */
  position: relative;
  /* 给右侧留足够内边距，避免图标覆盖文字 */
  padding-right: 30px;
  /* 其他按钮样式，按需调整 */
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

.corner-icon {
  /* 绝对定位，固定在按钮右上角 */
  position: absolute;
  top: 5px;
  right: 5px;
  /* 背景图标样式示例 */
  width: 16px;
  height: 16px;
  background-image: url('你的图标路径');
  background-size: cover;
  /* 如果用字体图标，替换成以下样式：
  font-family: 'Font Awesome 6 Free';
  content: "\f00d";
  font-weight: 900;
  font-size: 14px;
  */
}

如果不想在HTML里额外加图标元素，伪类是个干净简洁的选择：

场景1：用字体图标（比如Font Awesome） #

<button class="pseudo-icon-btn">按钮文字</button>

.pseudo-icon-btn {
  position: relative;
  padding-right: 30px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

/* 用:after伪类生成右上角图标 */
.pseudo-icon-btn:after {
  content: "\f00d"; /* Font Awesome叉号的Unicode值 */
  font-family: 'Font Awesome 6 Free';
  font-weight: 900; /* 确保字体图标正常显示 */
  position: absolute;
  top: 5px;
  right: 5px;
  font-size: 14px;
  color: white;
}

场景2：用背景图片作为图标 #

<button class="bg-icon-btn">按钮文字</button>

.bg-icon-btn {
  position: relative;
  padding-right: 30px;
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  background: #2563eb;
  color: white;
  cursor: pointer;
}

.bg-icon-btn:after {
  content: ""; /* 背景图标需将content设为空 */
  position: absolute;
  top: 5px;
  right: 5px;
  width: 16px;
  height: 16px;
  background-image: url('你的图标路径');
  background-size: contain;
  background-repeat: no-repeat;
}

• 一定要给按钮设置position: relative，否则绝对定位的图标会相对于整个文档流定位，直接跑错位置。
• 按钮的padding-right要比图标宽度大一些，保证文字和图标不会重叠。
• 伪类有数量限制，一个元素最多只能用:before和:after两个伪类，要是需要多个图标，还是方法一更合适。

内容的提问来源于stack exchange，提问作者Nay