cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              <div class="container-fluid pt-3">
<div class="row">
  <div class="col-6">
<button id="toggle" class="btn btn-secondary">Toggle Between MDI and MDI Light</button>
  </div>
  <div class="col-6 text-right pt-2">
    <a href="https://materialdesignicons.com" class="mr-2">MaterialDesignIcons.com</a>
  </div>
</div>
<div id="icons" class="mdil-set mdil-24px mdi-24px mt-2"></div>
  <blockquote>
    <p><strong>Note:</strong> MDI <code>v1.9.32</code> is missing the mdi-*-circle icons. This will be fixed in the next release of both.</p>
    <p>View on GitHub: <a href="https://github.com/Templarian/MaterialDesignLight">https://github.com/Templarian/MaterialDesignLight</a> (or view on the <a href="https://cdn.materialdesignicons.com/light/0.2.63/">CDN</a>).</p>
  </blockquote>
</div>
            
          
!
            
              #icons span {
  display: inline-block;
  width: 24px;
  &::before {
    width: 24px;
    height: 24px;
  }
}
blockquote {
  border-left: 4px solid #CCC;
  margin: 10px 0;
  padding: 10px 10px 1px 15px;
}
            
          
!
            
               var icons = [{"name":"account","hex":"f004"},{"name":"alarm","hex":"f020"},{"name":"alarm-plus","hex":"f024"},{"name":"alert","hex":"f026"},{"name":"alert-circle","hex":"f028"},{"name":"alert-octagon","hex":"f029"},{"name":"arrange-bring-forward","hex":"f03d"},{"name":"arrange-bring-to-front","hex":"f03e"},{"name":"arrange-send-backward","hex":"f03f"},{"name":"arrange-send-to-back","hex":"f040"},{"name":"arrow-down","hex":"f045"},{"name":"arrow-down-circle","hex":"f047"},{"name":"arrow-left","hex":"f04d"},{"name":"arrow-left-circle","hex":"f050"},{"name":"arrow-right","hex":"f054"},{"name":"arrow-right-circle","hex":"f057"},{"name":"arrow-up","hex":"f05d"},{"name":"arrow-up-circle","hex":"f060"},{"name":"bank","hex":"f070"},{"name":"bell","hex":"f09a"},{"name":"bell-off","hex":"f09b"},{"name":"bluetooth","hex":"f0af"},{"name":"book","hex":"f0ba"},{"name":"book-multiple","hex":"f0bb"},{"name":"book-plus","hex":"f5db"},{"name":"bookmark","hex":"f0c0"},{"name":"border-all","hex":"f0c7"},{"name":"border-bottom","hex":"f0c8"},{"name":"border-horizontal","hex":"f0ca"},{"name":"border-inside","hex":"f0cb"},{"name":"border-left","hex":"f0cc"},{"name":"border-none","hex":"f0cd"},{"name":"border-outside","hex":"f0ce"},{"name":"border-right","hex":"f0cf"},{"name":"border-top","hex":"f0d1"},{"name":"border-vertical","hex":"f0d2"},{"name":"briefcase","hex":"f0d6"},{"name":"calendar","hex":"f0ed"},{"name":"camcorder","hex":"f0fc"},{"name":"camera","hex":"f100"},{"name":"cancel","hex":"f739"},{"name":"cart","hex":"f110"},{"name":"chart-areaspline","hex":"f127"},{"name":"chart-bar","hex":"f128"},{"name":"chart-histogram","hex":"f129"},{"name":"chart-line","hex":"f12a"},{"name":"chart-pie","hex":"f12b"},{"name":"check","hex":"f12c"},{"name":"chevron-double-down","hex":"f13c"},{"name":"chevron-double-left","hex":"f13d"},{"name":"chevron-double-right","hex":"f13e"},{"name":"chevron-double-up","hex":"f13f"},{"name":"chevron-down","hex":"f140"},{"name":"chevron-left","hex":"f141"},{"name":"chevron-right","hex":"f142"},{"name":"chevron-up","hex":"f143"},{"name":"circle","hex":"f764"},{"name":"clipboard","hex":"f147"},{"name":"clipboard-check","hex":"f14c"},{"name":"clipboard-plus","hex":"f750"},{"name":"clipboard-text","hex":"f14e"},{"name":"clock","hex":"f150"},{"name":"closed-caption","hex":"f15e"},{"name":"cloud","hex":"f15f"},{"name":"cloud-download","hex":"f162"},{"name":"cloud-upload","hex":"f167"},{"name":"comment","hex":"f17a"},{"name":"comment-alert","hex":"f17d"},{"name":"comment-text","hex":"f188"},{"name":"console","hex":"f18d"},{"name":"content-cut","hex":"f190"},{"name":"content-duplicate","hex":"f191"},{"name":"content-paste","hex":"f192"},{"name":"content-save","hex":"f193"},{"name":"content-save-all","hex":"f194"},{"name":"credit-card","hex":"f19b"},{"name":"credit-card-scan","hex":"f19d"},{"name":"crop","hex":"f19e"},{"name":"crop-free","hex":"f19f"},{"name":"currency-eur","hex":"f1ad"},{"name":"currency-gbp","hex":"f1ae"},{"name":"currency-rub","hex":"f1b1"},{"name":"currency-usd","hex":"f1b3"},{"name":"delete","hex":"f1c0"},{"name":"diamond","hex":"f1c8"},{"name":"dots-horizontal","hex":"f1d8"},{"name":"dots-vertical","hex":"f1d9"},{"name":"download","hex":"f1da"},{"name":"eject","hex":"f1ea"},{"name":"email","hex":"f1ee"},{"name":"email-open","hex":"f1ef"},{"name":"eye","hex":"f208"},{"name":"eye-off","hex":"f209"},{"name":"factory","hex":"f20f"},{"name":"fast-forward","hex":"f211"},{"name":"file","hex":"f214"},{"name":"file-multiple","hex":"f222"},{"name":"file-plus","hex":"f751"},{"name":"flag","hex":"f23b"},{"name":"flash","hex":"f241"},{"name":"flask","hex":"f093"},{"name":"flask-empty","hex":"f094"},{"name":"folder","hex":"f24b"},{"name":"folder-multiple","hex":"f253"},{"name":"folder-plus","hex":"f257"},{"name":"format-align-bottom","hex":"f752"},{"name":"format-align-center","hex":"f260"},{"name":"format-align-justify","hex":"f261"},{"name":"format-align-left","hex":"f262"},{"name":"format-align-middle","hex":"f753"},{"name":"format-align-right","hex":"f263"},{"name":"format-align-top","hex":"f754"},{"name":"format-bold","hex":"f264"},{"name":"format-clear","hex":"f265"},{"name":"format-float-center","hex":"f267"},{"name":"format-float-left","hex":"f268"},{"name":"format-float-none","hex":"f269"},{"name":"format-float-right","hex":"f26a"},{"name":"format-indent-decrease","hex":"f275"},{"name":"format-indent-increase","hex":"f276"},{"name":"format-italic","hex":"f277"},{"name":"format-line-spacing","hex":"f278"},{"name":"format-list-bulleted","hex":"f279"},{"name":"format-list-checks","hex":"f755"},{"name":"format-list-numbers","hex":"f27b"},{"name":"format-quote-close","hex":"f27e"},{"name":"format-quote-open","hex":"f756"},{"name":"format-underline","hex":"f287"},{"name":"format-wrap-inline","hex":"f288"},{"name":"format-wrap-square","hex":"f289"},{"name":"format-wrap-tight","hex":"f28a"},{"name":"format-wrap-top-bottom","hex":"f28b"},{"name":"forum","hex":"f28c"},{"name":"fullscreen","hex":"f293"},{"name":"fullscreen-exit","hex":"f294"},{"name":"gift","hex":"f2a1"},{"name":"grid","hex":"f2c1"},{"name":"grid-large","hex":"f757"},{"name":"grid-off","hex":"f2c2"},{"name":"group","hex":"f2c3"},{"name":"hamburger","hex":"f684"},{"name":"heart","hex":"f2d1"},{"name":"heart-half","hex":"f6de"},{"name":"heart-off","hex":"f758"},{"name":"help","hex":"f2d6"},{"name":"help-circle","hex":"f2d7"},{"name":"hexagon","hex":"f2d8"},{"name":"home","hex":"f2dc"},{"name":"image","hex":"f2e9"},{"name":"inbox","hex":"f686"},{"name":"information","hex":"f2fc"},{"name":"label","hex":"f315"},{"name":"layers","hex":"f328"},{"name":"lightbulb","hex":"f335"},{"name":"lightbulb-on","hex":"f6e7"},{"name":"link","hex":"f337"},{"name":"link-variant","hex":"f339"},{"name":"lock","hex":"f33e"},{"name":"lock-open","hex":"f33f"},{"name":"login","hex":"f342"},{"name":"logout","hex":"f343"},{"name":"magnify","hex":"f349"},{"name":"magnify-minus","hex":"f34a"},{"name":"magnify-plus","hex":"f34b"},{"name":"map-marker","hex":"f34e"},{"name":"memory","hex":"f35b"},{"name":"menu","hex":"f35c"},{"name":"message","hex":"f361"},{"name":"message-alert","hex":"f362"},{"name":"message-image","hex":"f364"},{"name":"message-processing","hex":"f366"},{"name":"message-reply","hex":"f367"},{"name":"message-text","hex":"f369"},{"name":"message-video","hex":"f36b"},{"name":"microphone","hex":"f36c"},{"name":"microphone-off","hex":"f36d"},{"name":"minus","hex":"f374"},{"name":"minus-box","hex":"f375"},{"name":"minus-circle","hex":"f376"},{"name":"monitor","hex":"f379"},{"name":"monitor-multiple","hex":"f37a"},{"name":"music","hex":"f759"},{"name":"music-off","hex":"f75a"},{"name":"nfc-variant","hex":"f398"},{"name":"note","hex":"f39a"},{"name":"note-multiple","hex":"f6b7"},{"name":"note-plus","hex":"f39c"},{"name":"note-text","hex":"f39e"},{"name":"octagon","hex":"f3c3"},{"name":"paperclip","hex":"f3e2"},{"name":"pause","hex":"f3e4"},{"name":"pencil","hex":"f3eb"},{"name":"phone","hex":"f3f2"},{"name":"pin","hex":"f403"},{"name":"pin-off","hex":"f404"},{"name":"play","hex":"f40a"},{"name":"plus","hex":"f415"},{"name":"plus-box","hex":"f416"},{"name":"plus-circle","hex":"f417"},{"name":"power","hex":"f425"},{"name":"presentation","hex":"f428"},{"name":"presentation-play","hex":"f429"},{"name":"printer","hex":"f42a"},{"name":"redo-variant","hex":"f44f"},{"name":"refresh","hex":"f450"},{"name":"repeat","hex":"f456"},{"name":"repeat-off","hex":"f457"},{"name":"repeat-once","hex":"f458"},{"name":"rewind","hex":"f45f"},{"name":"rhombus","hex":"f70a"},{"name":"rss","hex":"f46b"},{"name":"script","hex":"f478"},{"name":"settings","hex":"f493"},{"name":"shield","hex":"f498"},{"name":"shuffle","hex":"f49d"},{"name":"signal","hex":"f4a2"},{"name":"sitemap","hex":"f4aa"},{"name":"skip-next","hex":"f4ad"},{"name":"skip-previous","hex":"f4ae"},{"name":"sleep","hex":"f4b2"},{"name":"sleep-off","hex":"f4b3"},{"name":"spellcheck","hex":"f4c6"},{"name":"square","hex":"f763"},{"name":"star","hex":"f4ce"},{"name":"star-half","hex":"f4d0"},{"name":"stop","hex":"f4db"},{"name":"tab","hex":"f4e9"},{"name":"tab-plus","hex":"f75b"},{"name":"table","hex":"f4eb"},{"name":"taco","hex":"f761"},{"name":"tag","hex":"f4f9"},{"name":"television","hex":"f502"},{"name":"thumb-down","hex":"f511"},{"name":"thumb-up","hex":"f513"},{"name":"thumbs-up-down","hex":"f515"},{"name":"tooltip","hex":"f523"},{"name":"tooltip-text","hex":"f528"},{"name":"triangle","hex":"f536"},{"name":"trophy","hex":"f538"},{"name":"undo-variant","hex":"f54d"},{"name":"unfold-less-horizontal","hex":"f54e"},{"name":"unfold-less-vertical","hex":"f75f"},{"name":"unfold-more-horizontal","hex":"f54f"},{"name":"unfold-more-vertical","hex":"f760"},{"name":"ungroup","hex":"f550"},{"name":"upload","hex":"f552"},{"name":"vector-arrange-above","hex":"f554"},{"name":"vector-arrange-below","hex":"f555"},{"name":"vector-combine","hex":"f558"},{"name":"vector-difference","hex":"f55a"},{"name":"vector-difference-ab","hex":"f55b"},{"name":"vector-difference-ba","hex":"f55c"},{"name":"vector-intersection","hex":"f55d"},{"name":"vector-union","hex":"f564"},{"name":"view-dashboard","hex":"f56e"},{"name":"view-module","hex":"f573"},{"name":"volume-high","hex":"f57e"},{"name":"volume-minus","hex":"f75d"},{"name":"volume-mute","hex":"f75e"},{"name":"volume-off","hex":"f581"},{"name":"volume-plus","hex":"f75c"},{"name":"wifi","hex":"f5a9"},{"name":"xml","hex":"f5c0"}];
console.log(icons.length);
var $icons = $('#icons');
var setIcons = function (type) {
  $icons.empty();
  $.each(icons, function (index, icon) {
    var $icon = $('<span>');
    $icon.addClass(type + '-' + icon.name);
    $icon.attr('title', icon.name + ' (' + icon.hex + ')')
    $icons.append($icon);
  });
}
setIcons('mdil');
var $toggle = $('#toggle');
$toggle.bind('click', function () {
  if ($icons.hasClass('mdil-set')) {
    $icons.removeClass('mdil-set')
          .addClass('mdi-set');
    setIcons('mdi');
  } else {
    $icons.removeClass('mdi-set')
          .addClass('mdil-set');
    setIcons('mdil');
  }
});
            
          
!
999px
Loading ..................

Console