How to add an icon/image to routes using Aurelia?

Question

I wanted to add an image/icon to my navigation links that were specified in Aurelia's router configuration.

Answer 1

I found the answer on GitHub. You can add a Settings property in router configuration which allows you to specify a path to an image. In my case I am using an SVG:

import {inject} from 'aurelia-framework';
import {Router} from 'aurelia-router';

@inject(Router)
export class App {
  constructor(router) {
    this.router = router;
    this.router.configure(config => {
      config.title = 'Aurelia';
      config.map([
        {route: ['', 'dogs'], moduleId: './dogs', nav: true, title: 'Dogs', settings: './img/dogs-nav.svg'},
        {route: ['cats', 'cats'], moduleId: './cats', nav: true, title: 'Cats', settings: './img/cats-nav.svg'},
    });
  }
}

<ul class="nav navbar-nav">
  <li repeat.for="row of router.navigation" class="${row.isActive ? 'active' : ''}">
    <a href.bind="row.href">
      <img src="${row.settings}">
      <span>${row.title}</span>
    </a>
  </li>
</ul>