Custom Icons

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.

There is a map in the icons.scss, where you can append to the map and add more Lightning Icons if required.

In this demo, we will be adding a custom icon to your LMS Project. If you want to follow along, select an icon from Feather icons and download the svg file. Name it custom.svg. Or you can download the icon we’re using here

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 custom-icons.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: Navigate to clientside/frontend/ and in that folder create a folder assets and the folder fonts inside assets/ in clientside/public/. Now move custom-icons.scss to clientside/src/scss/.

2. Open the custom-icons.scss file, and replace all the text to the following:

    @charset "UTF-8";
   
    @font-face {
      font-family: "custom-icons";
      src:url("/assets/fonts/custom-icons.eot");
      src:url("/assets/fonts/custom-icons.eot?#iefix") format("embedded-opentype"),
        url("/assets/fonts/custom-icons.woff") format("woff"),
        url("/assets/fonts/custom-icons.ttf") format("truetype"),
        url("/assets/fonts/custom-icons.svg#custom-icons") format("svg");
      font-weight: normal;
      font-style: normal;
    }
   
    .icon-custom:before {
      content: "\62";
    }
   

3. 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/custom-icons.scss",
   

   It should look like this:

    "styles": [
        // % protected region % [Add any additional styles here] on begin
        "src/assets/custom-icons.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"
    ],
   

4. 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

5. Turn on the protected region [Add your custom icons here], and add the following code import code:
   SpringBot:

    @import url("~assets/custom-icons.scss");
   

   C#Bot:

    @import url("./custom-icons.scss");
   

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

    custom: "\62",
   

7. Then assign the $icon-custom-name variable to custom-icons:

    $icon-custom-name: "custom-icons";
   

8. Now, if you use the class icon-custom it will add our new icon as a before element.