在前端開發中，很多時候需要對圖標進行修改和美化，其中一個常用的技術就是使用CSS樣式表來修改圖標的顏色和大小。在Vue中，我們可以通過以下幾種方式來實現修改圖標顏色的效果。

<template>
<div class="icon-container">
<i class="iconfont icon-home" :style="{color: color}"></i>
</div>
</template>
<script>
export default {
data() {
return {
color: 'red'
}
}
}
</script>

首先，我們可以在模板中使用標簽來渲染我們所需要的圖標，并通過:style屬性來綁定color屬性，從而實現圖標顏色的修改。在后面的data中，我們可以設置color屬性的值，以此來控制圖標的顏色。需要注意的是，這里我們使用的是iconfont這個類來渲染圖標。

<template>
<div class="icon-container">
<i :class="[iconClass, colorClass]"></i>
</div>
</template>
<script>
export default {
data() {
return {
iconClass: 'iconfont icon-home',
colorClass: 'red'
}
}
}
</script>

另外一種常見的方式是通過:class屬性來動態綁定圖標的類名和顏色類名，這樣就可以實現動態的圖標顏色和圖標內部的不同顏色。這種方式比較靈活，可以在data中設置好不同的類名和顏色類名，根據情況動態綁定。需要注意的是，這里需要在模板中使用iconfont類來渲染圖標。

<template>
<div class="icon-container">
<i :class="iconClass" :style="{color: color}"></i>
</div>
</template>
<script>
export default {
data() {
return {
iconClass: 'el-icon-menu',
color: 'green'
}
}
}
</script>

在使用第三方UI組件庫如ElementUI時，我們可以以類似的方式來修改圖標顏色，只需要將圖標的類名和顏色分別綁定到:class和:style屬性上即可。需要注意的是，這里我們使用的是el-icon-menu這個類來渲染圖標。

綜上所述，我們在Vue中可以通過不同的方式來修改和美化圖標的顏色，通過對i標簽，:style和:class屬性的靈活運用，可以實現不同類型的需求，具有很高的實用性和擴展性。