MaterialIcons

Usage

As an icon font material icons may be accessed via the VarJQICON[JQICON macro]]. To do so you need to register the material icons font to the IconService of JQueryPlugin. Add this section to the $Foswiki::cfg{JQueryPlugin}{IconFonts} setting if not already present:

$Foswiki::cfg{JQueryPlugin}{IconFonts} = {
...
  'material' => {
    'prefix' => 'ma',
    'definition' => '$Foswiki::cfg{PubDir}/$Foswiki::cfg{SystemWebName}/WebFontsContrib/material-icons/material.json',
    'css' => '$Foswiki::cfg{PubUrlPath}/$Foswiki::cfg{SystemWebName}/WebFontsContrib/material-icons/font-face.css', 
  },
...
};

This will register the ma prefix to refer to the given icon definition so that below call to %JQICON will load the appropriate css and font files:

You type:

%JQICON{"ma-add-alarm"}%

You get:

where add-alarm is the name of an icon. See the full list of all icons below.

Icons

%STARTATTACH{"style.css" hidecontent="on"}% .entry { width:18em; line-height:30px; color:inherit; text-decoration:none; white-space:nowrap; overflow:hidden; display:inline-block; } .entry:hover { text-decoration:none; } .entry i { -webkit-transition: font-size 250ms; transition: font-size 250ms; margin:0 14px 0 5px; } .entry:hover i { font-size:28px; } %ENDATTACH% %STARTATTACH{"script.js" hidecontent="on"}% "use strict"; jQuery(function($) { var timer; function filterOverview(val) { var regex = new RegExp(val, "i"), $overview = $(".overview"); console.log("filterOverview(",val,")"); if (val = ”) { $overview.find(".entry").hide().each(function() { var $this = $(this); if (regex.test($this.text())) { $this.show(); } }); } else { $overview.find(".entry").show(); } } $(".filterIcons:not(.filterIconsInited").livequery(function() { var $input = $(this); $input.addClass("filterIconsInited"); $input.keyup(function() { if (typeof(timer) == 'undefined') { //console.log("clearing timeout"); window.clearTimeout(timer); } timer = window.setTimeout(function() { var val = $input.val(); filterOverview(val); timer = undefined; }, 100); //console.log("new timer",timer); }); }); }); %ENDATTACH%

Search: