如何使组件可拖动，但只能从拖动图标拖动，而不能从其他任何地方拖动？

<div class="drag-icon" onmousedown="startDrag(event)"></div>
<div id="component" class="draggable-component">
  <!-- 组件内容 -->
</div>

.draggable-component {
  position: absolute;
  /* 初始位置 */
  left: 0;
  top: 0;
  /* 组件样式 */
}

.drag-icon {
  /* 拖动图标的样式 */
}

function startDrag(event) {
  // 记录鼠标按下的初始位置
  var startX = event.clientX;
  var startY = event.clientY;

  // 给组件添加鼠标移动事件和鼠标松开事件
  document.addEventListener('mousemove', dragComponent);
  document.addEventListener('mouseup', stopDrag);

  function dragComponent(event) {
    // 计算鼠标位置的变化
    var moveX = event.clientX - startX;
    var moveY = event.clientY - startY;

    // 更新组件的位置
    var component = document.getElementById('component');
    component.style.left = component.offsetLeft + moveX + 'px';
    component.style.top = component.offsetTop + moveY + 'px';

    // 更新鼠标的初始位置
    startX = event.clientX;
    startY = event.clientY;
  }

  function stopDrag() {
    // 移除鼠标移动事件和鼠标松开事件的监听器
    document.removeEventListener('mousemove', dragComponent);
    document.removeEventListener('mouseup', stopDrag);
  }
}