How to use Ionicons v5 with Vue.js
Tags: vue, javascript, tutorial, ionicons
Published: 2020-02-11 14:04:46

There are a lot of awesome icon sets out there, but the set from the Ionic framework - [Ionicons](https://ionicons.com/) - is still one of my favorites. It surely is a matter of taste, but I love the icon style, their support of SVG and the fact that it's completely free and open source (MIT licensed).

A few days ago, a [new major version of Ionicons was released](https://github.com/ionic-team/ionicons/blob/master/CHANGELOG.md) (v5.0.0) introducing appearance variants (*filled*, *outline* and *sharp*) for each icon instead of platform specific variants. However You can still apply specific appearances to different platforms and you can not only customize size and color but even the stroke width. Nice! Here are some examples:

**Appearance Variants**

The appearance can be changed by using the corresponding icon name.

```html
<!-- HTML -->
<ion-icon name="flash-outline"></ion-icon>
<ion-icon name="flash"></ion-icon>
<ion-icon name="flash-sharp"></ion-icon>
```
<div class="highlight"><pre class="highlight"><span class="c">// RESULT</span><div><img src="https://dev-to-uploads.s3.amazonaws.com/i/dxw3g6pxxu2avxpz5fy6.png" /></div></pre></div>

**Size**

Sizes can be adjusted by using the `size` property or defining a custom `font-size` in CSS.

```html
<!-- HTML -->
<ion-icon name="bulb-outline" size="small"></ion-icon>
<ion-icon name="bulb-outline"></ion-icon>
<ion-icon name="bulb-outline" size="large"></ion-icon>
```
<div class="highlight"><pre class="highlight"><span class="c">// RESULT</span><div><img src="https://dev-to-uploads.s3.amazonaws.com/i/iq1vyf0979gsf825krnx.png" /></div></pre></div>

**Color**

The color can be changed by simply using the `color` property of CSS.

```html
<!-- HTML -->
<ion-icon name="checkmark-circle-outline" class="success"></ion-icon>
<ion-icon name="add-circle-outline"></ion-icon>
<ion-icon name="close-circle-outline" class="error"></ion-icon>
```
```css
// CSS
.success {
  color: #20c933;
}
.error {
  color: #ec213b;
}
```
<div class="highlight"><pre class="highlight"><span class="c">// RESULT</span><div><img src="https://dev-to-uploads.s3.amazonaws.com/i/789jdp6idbdusuvo2r63.png" /></div></pre></div>

**Stroke Width**

The stroke width is change by the CSS custom property `--ionicon-stroke-width`.

```html
<!-- HTML -->
<ion-icon name="cube-outline" class="thin"></ion-icon>
<ion-icon name="cube-outline"></ion-icon>
<ion-icon name="cube-outline" class="bold"></ion-icon>
```
```css
// CSS
.thin {
  --ionicon-stroke-width: 8px;
}
.bold {
  --ionicon-stroke-width: 64px;
}
```
<div class="highlight"><pre class="highlight"><span class="c">// RESULT</span><div><img src="https://dev-to-uploads.s3.amazonaws.com/i/0w4jizcuq9mdqv73uz45.png" /></div></pre></div>

If you'd like to play around with these examples you can use [this CodePen](https://codepen.io/devmount/pen/eYNNxOq).


As I build PWAs with Vue.js without using the Ionic Framework, I was facing the problem of properly adding the freshly-baked v5 Ionicons to Vue.

That's how it currently works for me in 2 simple steps.

## 1. Import the Ionicons ECMAScript Module

To make the Ionicons available, add the ECMAScript module version to the head of your `public/index.html` like this:

```html
<script type="module" src="https://unpkg.com/ionicons@5.0.0/dist/ionicons/ionicons.esm.js"></script>
```

## 2. Configure Vue.js

If you try to use the `<ion-icon name="add"></ion-icon>` element in your templates, it will properly render but you will get the following error in your console:

> [Vue warn]: Unknown custom element: <ion-icon> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
> 
> found in
> 
> ---> <App> at src/App.vue
>        <Root>

This happens because the Vue instance doesn't know about the `ion-icon` component. To tell Vue that this is an external component, you can set the following in your `src/main.js`:

```javascript
Vue.config.ignoredElements = [/^ion-/]
```

Now you can use the `ion-icon` component in your templates without warnings.

## Wrap it up

The above approach works, but it would have been much cleaner to properly register Ionicons as component in Vue itself. I didn't manage to do this (yet). Maybe you have an idea how it works with the latest Ionicons? Let's discuss it in the comments!

P.S. Maybe there's somebody who could [make a PR](https://github.com/ionic-team/ionicons/pulls) adding the dev.to logo to the Ionicon logo selection 🤓

---

*Published: 11th February 2020*