By default icons in the theme are represented by the Material Icons Outlined icon font. However, it is sometimes required 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 icon library your web app uses.
You can find more examples in the Golden sample app and its Customize icons section in its Readme file.
Replace the entire icon font when icon names match
1. Define a font-face for a new icon font
@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
.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
@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
.bb-icon {
font-family: "IcoMoon";
}
3. Override a particular icon
.bb-icon-transactions::before {
content: "credit-card";
}
Replace some icons with icon font
1. Define a font-face for a new icon font
@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
.bb-icon-transactions {
font-family: 'IcoMoon';
&::before {
content: "coin-euro";
}
}
Replace some icons with SVG
1. Override a particular icon
.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 the file name here is different and contains 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.