> For the complete documentation index, see [llms.txt](https://devworkshops.gitbook.io/masteringvuejs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://devworkshops.gitbook.io/masteringvuejs/styling-the-ui/icons.md).

# Icons

## Installing icons

Unlike previous versions, Bootstrap does not include an icon library by default. There are many great choices for Vue, a popular one being [Feather](https://feathericons.com/). [Vue-Feather](https://fengyuanchen.github.io/vue-feather/) is a great option when working with Feather icons. To get started, use npm to install the required packages:

```
npm install vue-feather feather-icons --save
```

## Add icons to the site navigation

The site navigation will look great if we add some eye catching icons. Open the **NavBar.vue** file, and start by importing Vue-Feather as follows:

{% code title="NavBar.vue" %}

```javascript
...
import VueFeather from 'vue-feather'
...
components: {
    VueFeather
}
...
```

{% endcode %}

Next, update the associated template:

{% code title="NavBar.vue" %}

```markup
...
<b-navbar-nav class="mr-auto">
    <b-nav-item to="/" :exact="true">
        <vue-feather type="home"></vue-feather>Home
    </b-nav-item>
    <b-nav-item to="/suppliers">
        <vue-feather type="shopping-cart"></vue-feather>Suppliers
    </b-nav-item>
    <b-nav-item to="/categories">
        <vue-feather type="list"></vue-feather>Categories
    </b-nav-item>
    <b-nav-item to="/products">
        <vue-feather type="package"></vue-feather>Products
    </b-nav-item>
</b-navbar-nav>
...
```

{% endcode %}

Finally, add some additional styles to adjust the layout:

{% code title="NavBar.vue" %}

```css
...
.navbar .nav-link .feather {
    margin-right: 4px;
    color: #999;
}
...
```

{% endcode %}

{% code title="App.vue" %}

```css
...
.feather {
    width: 16px;
    height: 16px;
}
...
```

{% endcode %}

## Add icons to action buttons

Adding icons to action buttons will quickly convey the intent, improve the visual appeal, as well as saving screen real estate. Open **CategoryList.vue** and update as follows:

{% code title="CategoryList.vue" %}

```javascript
...
<script>
import VueFeather from 'vue-feather'

export default {
    components: {
        VueFeather
    }
}
</script>
...
```

{% endcode %}

Update the action buttons to edit or delete a category:

{% code title="CategoryList.vue" %}

```markup
...
<button type="button" class="btn btn-secondary" @click="edit(category, index)">
    <vue-feather type="edit-2"></vue-feather>
</button>
<button type="button" class="btn btn-danger" @click="remove(category.id)">
    <vue-feather type="x"></vue-feather>
</button>
...
```

{% endcode %}

Update the action buttons to update or cancel changes to a category:

{% code title="CategoryList.vue" %}

```markup
...
<button type="button" class="btn btn-secondary" @click="update()">
    <vue-feather type="check"></vue-feather>
</button>
<button type="button" class="btn btn-warning" @click="cancelUpdate()">
    <vue-feather type="corner-up-left"></vue-feather>                       
</button>
...
```

{% endcode %}

Finally, update the action buttons to add or cancel adding a new category:

{% code title="CategoryList.vue" %}

```markup
...
<button type="button" class="btn btn-secondary" @click="add()">
    <vue-feather type="plus"></vue-feather>
</button>
<button type="button" class="btn btn-warning" @click="resetAdd()">
    <vue-feather type="corner-up-left"></vue-feather>                            
</button>
```

{% endcode %}

Fantastic. Save your changes and ensure that icons appear as expected:

![](/files/-LWdbqgBxlItG0gtLKX4)


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://devworkshops.gitbook.io/masteringvuejs/styling-the-ui/icons.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.