By default icons in the theme are represented by Material Icons Outlined icon font. However sometimes there is requirement to replace all the icons or some of them by a custom icon set. In this document you can find a recommended way of customizing the icons.

You can find more examples on the Golden sample app and its Customize icons section in Readme file.

Replace the entire icon font when icon names match

1) Define a font-face for a new icon font, e.g.:

@font-face {
  font-family: "Material Icons Rounded";
  font-style: normal;
  font-weight: 400;
  src: url("assets/custom-icons/MaterialIconsRound-Regular.otf") format("opentype");
}

2) Override font-family for bb-icon-ui CSS class, e.g.:

.bb-icon {
  font-family: "Material Icons Rounded";
}

Replace the entire icon font when icon names do not match

1) Define a font-face for a new icon font, e.g.:

@font-face {
  font-family: "IcoMoon";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/IcoMoon/icomoon.ttf") format("truetype");
}

2) Override font-family for bb-icon-ui CSS class, e.g.:

.bb-icon {
  font-family: "IcoMoon";
}

3) Override a particular icon, e.g.:

.bb-icon-transactions::before {
  content: "credit-card";
}

Replace some icons with icon font

1) Define a font-face for a new icon font, e.g.:

@font-face {
  font-family: "IcoMoon";
  font-style: normal;
  font-weight: 400;
  src: url("assets/fonts/IcoMoon/icomoon.ttf") format("truetype");
}

2) Override a particular icon, e.g.:

.bb-icon-transactions {
  font-family: 'IcoMoon';
  &::before {
    content: "coin-euro";
  }
}

Replace some icons with SVG

1) Override a particular icon, e.g.:

.bb-icon-transactions {
  background-image: url('assets/custom-icons/swap_horiz_black_24dp.svg');
  display: block;
  background-size: contain;
  background-repeat: no-repeat;
  &::before {
    content: '';
  }
}

2) Define the height and width based on the original icon font size.

If the icon was defined as medium via <bb-icon-ui size="md"></bb-icon-ui>, then here is how the size can be defined:

.bb-icon-transactions.bb-icon--md {
  width: map-get($icon-size-map, md);
  height: map-get($icon-size-map, md);
}

3) Customize colors if needed

To color an SVG icon provided by an SVG file, one needs to specify another SVG file with hardcoded color in its source code, e.g.:

.bb-layout__horizontal-nav-link--active,
.bb-layout__horizontal-nav-link--expanded {
  .bb-icon-transactions {
    background-image: url('assets/custom-icons/swap_horiz_black_24dp_color_primary.svg');
  }
}

Note that file name here is different and contain an SVG icon for color primary. Note that customizing for SVG icons size, colors, etc. does not come out of the box and should be specified by developers.