Allow use of different icons via the config.yml file

**UPDATE:** See below for a temporary workaround. Ideally someone can still make this happen via the config.yml file instead though.

 

---

## Original Request

**- Do you want to request a *feature* or report a *bug*?**

Feature request

**- What is the current behavior?**

All icons for collections are the same. It is hard to quickly differentiate if there is a large number of collection types.

**- What is the expected behavior?**

Possibly through using something like font awesome instead of SVG's, allow developers to change the look of the icon next to each category in the side bar.

**- Please link or paste your `config.yml` below if applicable.**

See the addition of the icon attribute below as an example:

```yaml
collections:
- name: settings
label: Settings
icon: fa-cog
files:
- label: Global Settings
name: global
file: global-settings.yml
```

Many users probably have font awesome cached in their browser as well if that helps.

---

 

## Temporary Solution & Example of Output

For reference, I have added font awesome css to my site and used the web inspector to manually change the icons to see if it works. **SPOILER: IT DOES! (as you would expect..)**

So far all I had to do was replace the relevant SVG elements with the following:

```html

```

I did this by using the following javascript code placed after the react app:

```html

icons = [
{"name": "cal","fa": "calendar"},
// ...
{"name": "settings","fa": "cogs"}
]

function iconify() {
icons.forEach(function(item) {
var selector = "a[href$='" + item.name + "'] .nc-icon span";
var loc = document.querySelector(selector);
var i = document.createElement("i");
i.classList.add("fa", "fa-fw", "fa-" + item.fa);
i.setAttribute("aria-hidden", "true");
if (loc) {
while (loc.firstChild) loc.removeChild(loc.firstChild);
loc.appendChild(i);
}
})
}

var observer = new MutationObserver(function(changes) {
iconify();
});

var init = new MutationObserver(function(changes) {
var exists = !!document.querySelector(".nc-app-main div");

if (exists) {
iconify();
observer.observe(document.querySelector('.nc-app-main div'), {
childList: true
});
init.disconnect();
}
});

init.observe(document.querySelector('body'), {
childList: true
});

```

...and put the following in my HTML header:

```html

.nc-collectionPage-sidebarLink i {
font-size: 19px;
line-height: 24px;
margin-left: -1px;
}

```

... which results in this:

This is exactly the type of output I am hoping for from this feature request. Unfortunately I don't have any time for a little while to try and integrate these better myself, but this might help someone else in the mean time?

*P.S. This workaround only works in modern browsers due to use of `MutationObserver`. I'm also not sure how efficient it is.. feedback appreciated!*