As an icon font material icons may be accessed via the 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:
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 {
margin:0 14px 0 5px;
font-size:24px;
}
%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.on("keyup search", 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: