HTML中可以通過CSS的方式，設置上下轉動的圖標，具體步驟如下：

.icon {
display: inline-block;
width: 10px;
height: 10px;
border: 2px solid #000;
border-top: none;
border-right: none;
transform: rotate(45deg);
transition: all .3s ease;
}
.icon.active {
transform: rotate(-135deg);
}

以上CSS代碼中，.icon類表示要設置的圖標樣式，其中border屬性設置圖標的邊框，transform屬性設置圖標的旋轉角度，transition屬性設置圖標的過渡效果。

在HTML中，可以通過添加class為icon的元素來使用上述圖標樣式。

當需要讓圖標上下轉動時，只需要通過JavaScript修改該元素的class屬性，將其切換為包含active類名的樣式即可：

var icon = document.querySelector('.icon');
icon.addEventListener('click', function() {
icon.classList.toggle('active');
});

以上JavaScript代碼中，使用addEventListener方法為.icon元素綁定了一個點擊事件，當該元素被點擊時，通過使用classList對象的toggle方法，切換元素的class屬性，從而實現了上下轉動的效果。