Icons examples, using Font-Awesome

FA provides a free icons set, and paid ones. NRN only comes with the free set.
But it is completely possible to use a paid icon set, if you wish so (we do in our Enterprise apps).

In order to make FA icons usable in both server-side and client-side, you need to manually import those you want to use in the _app component, as follow:


            import { config, library } from '@fortawesome/fontawesome-svg-core';
            import '@fortawesome/fontawesome-svg-core/styles.css';

            // Import your icons, and then add them to the libary
            import { faGithub } from '@fortawesome/free-brands-svg-icons';
            import { faBook, faBookReader, faCoffee, faHome, faUserCog } from '@fortawesome/free-solid-svg-icons';

            // See https://github.com/FortAwesome/react-fontawesome#integrating-with-other-tools-and-frameworks
            config.autoAddCss = false; // Tell Font Awesome to skip adding the CSS automatically since it's being imported above
            library.add(
              faGithub,
              faBook, faBookReader, faCoffee, faHome, faUserCog,
            );

You can then use FA icons like this:

Using the below code:


            <FontAwesomeIcon icon={['fab', 'github']} /> // fab stands for FontAwesome "Brand"
            <FontAwesomeIcon icon={['fas', 'home']} /> // fas stands for FontAwesome "Solid"

TypeScript support will guide you when writing <FontAwesomeIcon icon={['fab', 'github']} />, by telling you if the icon is valid.

Built-in features

Icons examples, using Font-Awesome