Portal: How to change a brick icon

In this How to, we change the “New request” icon from a conversation bubble to a paper plane.

What you will need to:

• Know how to make an iTop extension and upgrade your system,
• Have an iTop system with the demo data and the enhanced portal installed,
• Have access to an account with enough rights to connect to the portal (usually this means having the Portal User profile).

In this tutorial, you will learn how to:

• Change the icon of the “New request” brick

First, we need to create an iTop extension that will alter the portal XML configuration to change the icon of the brick. Check the Extension modules part from the customization guide (iTop Customization) if necessary.

1. Name the extension as sample-portal-change-brick-icon.
2. Remove the main.sample-portal-change-brick-icon.php file as we won't need any PHP code.
3. Remove the *.dict.sample-portal-change-brick-icon.php files as we won't need any translations.

You should have the following structure:

Now that we have the extension, we just need to make an XML delta and change the portal configuration to define which icon we want. Open the datamodel.sample-portal-change-brick-icon.xml file and paste the following code:

datamodel.sample-portal-change-brick-icon.xml

<?xml version="1.0" encoding="UTF-8"?>
<itop_design xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" version="1.7">
  <module_designs>
    <module_design id="itop-portal">
      <bricks>
        <brick id="services">
          <decoration_class>
            <default _delta="force">fas fa-paper-plane fa-2x fa-fw</default>
          </decoration_class>
        </brick>
      </bricks>
    </module_design>
  </module_designs>
</itop_design>

This redefines the services (a.k.a “New request”) brick icon with ours. The important parts are:

• fas fa-paper-plane The icon classes to be found on the FontAwesome v5 website (free category only).
• fa-2x Makes sure the icon has the same size as the others in the navigation menu.
• fa-fw Makes sure the icon will be centered like the others in the navigation menu.

Finally run an upgrade of your iTop system with the new extension option checked and access the portal. You should see the new New request icon changed by our paper plan.

You can find this extension on our GitHub here 👌