如何实现带Home/Chevron Right图标的可复用按钮：交互与样式设置

问题1：将Home和Chevron Right图标添加到按钮内部 #

直接在按钮标签内嵌入图标元素即可，图标字体、SVG都适用：

<button class="custom-btn">
  <!-- 用图标字体示例 -->
  <i class="icon home-icon">🏠</i>
  <span>按钮文本</span>
  <i class="icon chevron-icon">➤</i>

  <!-- 用SVG示例（替换上面的图标字体即可） -->
  <!-- <svg class="icon home-icon" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
  </svg>
  <span>按钮文本</span>
  <svg class="icon chevron-icon" viewBox="0 0 24 24">
    <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/>
  </svg> -->
</button>

问题2：实现按钮整体可点击，同时Chevron Right图标单独可点击 #

核心是阻止图标点击事件的冒泡，避免触发按钮的主点击逻辑：

const btn = document.querySelector('.custom-btn');
const chevronIcon = btn.querySelector('.chevron-icon');

// 按钮整体点击逻辑
btn.addEventListener('click', () => {
  console.log('执行按钮主操作');
});

// 右侧图标独立点击逻辑
chevronIcon.addEventListener('click', (e) => {
  e.stopPropagation(); // 阻止事件冒泡，避免触发按钮主逻辑
  console.log('展示更多选项');
});

样式上确保图标区域可点击：

.chevron-icon {
  cursor: pointer;
}

问题3：为两个图标设置不同颜色 #

通过类名选择器分别指定颜色：

/* 图标字体设置color */
.home-icon {
  color: #2d3748;
}
.chevron-icon {
  color: #3182ce;
}

/* SVG图标设置fill（如果用SVG的话） */
/* .home-icon path {
  fill: #2d3748;
}
.chevron-icon path {
  fill: #3182ce;
} */

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