Icons

We are using iconify library for icons.
Read the official Iconify Documentation for a full list of instructions and other options.

Info: We may have used margin utilities and icon size classes for demo purpose in documentation

Iconify Icons#

Iconify allows you to easily integrate SVG icons into your project. It simplifies the process of adding scalable vector icons without relying on multiple libraries, providing access to thousands of icons in a single package.

Info: You can check complete list of box icons from https://icon-sets.iconify.design/ri.

We have already included Iconify Icons in template so you don't have to worry about including any files. Check below mentioned path to find Iconify Icons in your template.

<link rel="stylesheet" href="../../assets//vendor/fonts/iconify-icons.css" />

Basic Usage#

<i class="icon-base ri ri-trophy-line me-4 icon-36px"></i>
<i class="icon-base ri ri-vip-crown-line me-4 icon-36px"></i>
<i class="icon-base ri ri-question-answer-line me-4 icon-36px"></i>
<i class="icon-base ri ri-gift-line me-4 icon-36px"></i>
<i class="icon-base ri ri-focus-2-line icon-36px"></i>
Class Value
class="icon-base ri ri-{value}" ICON_NAME

Sizing#

<i class="icon-base ri ri-arrow-up-line icon-48px me-4"></i>
<i class="icon-base ri ri-arrow-up-line icon-36px me-4"></i>
<i class="icon-base ri ri-arrow-up-line icon-24px me-4"></i>
<i class="icon-base ri ri-arrow-up-line icon-20px me-4"></i>
<i class="icon-base ri ri-arrow-up-line icon-18px me-4"></i>
<i class="icon-base ri ri-arrow-up-line icon-14px"></i>
Class Value
class="icon-{value}" 14px |18px |20px | 24px | 36px | 48px

FAQs#

How to use/update other iconify icons?#

Materio provides iconify icons. It will give you freedom to choose any icons set. So user can use icons of their own choice as well.

We have used boxicons iconify icons. Materio uses default, solid & logo icons of iconify boxicons.

If you are using building tools,

Let's say, you want to add other iconify icons like feather. Please follow below steps :

  • Open fonts/iconify/iconify.js file to update with new icons.
  • Find below json source that adding boxicons
    • // Icon sources
const sources = {
  json: [
    require.resolve('@iconify/json/json/bx.json'),
    require.resolve('@iconify/json/json/bxl.json'),
    require.resolve('@iconify/json/json/bxs.json')
  ]
};
  • Update that code with Feather Icons's json file
    • // Icon sources
const sources = {
  json: [
    require.resolve('@iconify/json/json/fe.json')
  ]
};
  • Also, Update commonSelector class in iconify.js file to use new iconify icons. Like below
    • commonSelector: '.fe',
  • Run below command(s) to build fonts. For other build tasks read more : 
    • yarn install
yarn build
  • Now, user can use feather iconify icons with it's classes like class="fe fe-comment-o" and so on..

You don't need to update file include as once you build assets same file will update with newly added icons.

And You are all Set!!

How to use custom font-icons?#

Materio provides option to use custom font icons. So user can use icons of their own choice as well.

If you are using building tools,

If you want to add other font-icons like boxicons. Please follow below steps :

  • Include font-icons inside package.json file to install using npm / yarn
    • "dependencies": {
  ...
  "boxicons": "~2.0.9",
  ...
}
  • Run command yarn install or npm install to install fonts inside template's node-modules
  • Now, create boxicons.scss file inside src/fonts/ folder.
  • Include boxicon css from node-modules to boxicons.scss file.
  • You can add custom variables, style and override current font style. Like below
    • $boxicons-font-size-base: 16px;  // variable

    @import '../node_modules/boxicons/css/boxicons';  // import from node-modules

    // Custom scss
    .bx {
      vertical-align: middle;
      font-size: 1.15rem;
      line-height: 1;
    }
    // Override font path according to yours
    @font-face {
      font-family: 'boxicons';
      font-weight: normal;
      font-style: normal;

      src: url('../fonts/boxicons/boxicons.eot');
      src: url('../fonts/boxicons/boxicons.eot') format('embedded-opentype'),
        url('../fonts/boxicons/boxicons.woff2') format('woff2'),
        url('../fonts/boxicons/boxicons.woff') format('woff'),
        url('../fonts/boxicons/boxicons.ttf') format('truetype'),
        url('../fonts/boxicons/boxicons.svg?#boxicons') format('svg');
    }
  • To build css and get fonts files, declare custom fonts to src/tasks/build.js file.
    • // Build fonts
    // -------------------------------------------------------------------------------
    const FONT_TASKS = [
      {
        name: 'boxicons',
        path: 'node_modules/boxicons/fonts/*'
      },
      ...
    ]
  • Include style file in html files, like
    • <link rel="stylesheet" href="ASSETS_PATH/vendor/fonts/boxicons.css" />
  • Run below command(s) to build fonts. For other build tasks read more : 
    • yarn build

    OR

    yarn build:fonts
    yarn build:css
  • Now, user can use boxicons fonts with it's classes like class="icon-base ri ri-chat-2-line" and so on..

You can generate Iconify icon. Read More

If you are not using building tools,

You can include CDN fonts using CDN. Read More

If you want to use font icons using font files. Read More