Atmos
  • Getting Started
  • Build System
    • Gulp
      • Gulp 4
    • Page Structure
    • Sass Modules
  • UI Elements
    • Colors
    • Buttons
    • Icons
    • Cards
    • Alerts
    • Modals
    • Avatar
    • Tables
    • Mail Templates
  • forms
    • Form Layouts
    • Switch
    • Tag Input
    • Radio Box
    • Select2
    • Datepickers
    • Masked Input
    • Rangeslider
    • Dropzone Fileupload
    • Form Wizard
    • Form Validation
  • Charts
    • Charts
    • Apex Charts
    • Chartjs
    • Google Charts
    • Chartist
  • Maps
    • Google Maps
    • Vector Maps
  • Starter Template
    • blank template Markup
Powered by GitBook
On this page
  1. UI Elements

Icons

PreviousButtonsNextCards

Last updated 6 years ago

Atmos comes bundled with 1500+ material design icons which are available from .

To use the icons include the following css file

<link rel="stylesheet" type="text/css" href="assets/fonts/materialdesignicons/materialdesignicons.min.css">

Mapped Icons

we have used material icons as default icon family in atlas. you can change the icons used in atlas by changing values in variables

//Icons
$icon-font: 'Material Design Icons';

//Icon Mappings
$icon-chevron-down: "\F140";
$icon-chevron-up: "\F143";
$icon-chevron-left: "\F141";
$icon-chevron-right: "\F142";
$icon-sidebar-pin: "\F930";
$icon-sidebar-pin-off: "\F92F";
$icon-search: "\F349";
$icon-arrow-right: "\F054";
$icon-arrow-left: "\F04D";
$icon-close: "\F156";
$icon-close-circle: "\F15a";
$icon-check: "\F12c";
$icon-check-circle: "\F5e0";
$icon-circle: "\F130";
$icon-fullscreen: "\F293";
$icon-fullscreen-close: "\F294";
$icon-reload: "\F453";
$icon-menu: "\F35C";
https://materialdesignicons.com