Start modelling your app today.

Get started for free

What's this?

Custom Icons

This article shows you how to create your own icon fonts and how to use them in your application.


By default, Codebots projects are packaged with our Lightning Icons set. However, you can choose to extend replace the Lightning Icons and use your own icon-font.

In this demo, we will be adding a custom icon to your Fishnatics Project. If you want to follow along, you will need to download the icon: fish-tank.svg and rename it to tank.svg

Firstly, we will need to convert our SVG to an icon font. We recommend Fontastic, but there are many tools available to assist with this.

  1. After logging into Fontastic, select Add More Icons from the top menu
  2. Upload the tank SVG and return to the home page
  3. Click Modify Fonts and rename the font to tank
  4. Select the tank SVG from the New Set and move onto Publish

    Normally, you may wish to modify some of the values in the Customise section but the default values are sufficient for this demo.

  5. Download the custom icon files. Rename the style.css file to fishnatics.scss.

If these instructions are still unclear you can watch the following video:

  1. Move these files into

    Springbot: Create a folder fonts/ in clientside/src/assets.

    C#Bot: Create a folder assets and the folder fonts inside assets/ in clientside/public/. Now move fishnatics.scss to clientside/src/scss/.

    1. Open the fishnatics.scss file, and replace all the text to the following:
@charset "UTF-8";

@font-face {
  font-family: "fishnatics";
  src:url("assets/fonts/fishnatics.eot");
  src:url("assets/fonts/fishnatics.eot?#iefix") format("embedded-opentype"),
    url("assets/fonts/fishnatics.woff") format("woff"),
    url("assets/fonts/fishnatics.ttf") format("truetype"),
    url("assets/fonts/fishnatics.svg#fishnatics") format("svg");
  font-weight: normal;
  font-style: normal;
}

.icon-tank:before {
  content: "\61";
}
  1. If you are using SpringBot (Skip this step if you are using C#Bot) you will have to import the fonts from the assets within angular.json file. Go to angular.json and find "styles": []. Turn on the protected region Add any additional styles here and add the following code above the line "src/styles.scss",:

    "src/assets/fishnatics.scss",
    

It should look like this:

"styles": [
    // % protected region % [Add any additional styles here] on begin
    "src/assets/fishnatics.scss",
    // % protected region % [Add any additional styles here] end
    "src/styles.scss",
    "node_modules/@ng-select/ng-select/themes/default.theme.css",
    "node_modules/ng-pick-datetime/assets/style/picker.min.css"
],
  1. Now we need to open the project’s icons.scss file, located at clientside/src/app/lib/scss/abstracts/icons.scss for SpringBot and clientside\src\scss\abstracts\icons.scss for C#Bot
  2. Turn on the protected region [Add your custom icons here], and add the following code import code:
    SpringBot:

    @import url("~assets/fishnatics.scss");
    

    C#Bot:

    @import url("./fishnatics.scss");
    

Then underneath that you will see an empty map icon-custom: ();. Inside that map add the following:

tank: "\61",

Then assign the $icon-custom-name variable to fishnatics:

$icon-custom-name: "fishnatics";
  1. Now, if you use the class icon-tank it will add our new icon as a before element.

Start modelling your app today.