Icons
MarkdownPlus supports using icons.
Syntax
:icon-name:
Example
Icon: :diamond:
Icon:
Icons are implemented as inline-SVG and adopt the surrounding text color (red in the example above).
Styling
CSS variables ready to use:
- --mdp-icon-size
- --mdp-icon-angle
Examples
css: body { --mdp-icon-size: 2em; }
Icon:
css: body { --mdp-icon-angle: 60deg; }
Icon:
Disable Icon Rendering
If desired, you can disable this feature via site/config/config.php:
'pgfactory.markdownplus.options' => ['enableIcons' => false],
Available Icons
:airplay:
:alarm_clock:
:align_horizontal:
:align_vertical:
:angle:
:archive:
:arrow_bottom_left:
:arrow_bottom_right:
:arrow_down_circle:
:arrow_down:
:arrow_left_circle:
:arrow_left:
:arrow_right_circle:
:arrow_right:
:arrow_top_left:
:arrow_top_right:
:arrow_up_circle:
:arrow_up:
:audio_wave:
:backspace:
:backward:
:bag:
:battery_75:
:battery_charging:
:battery_empty:
:battery_full:
:battery_half:
:battery_low:
:bell_disabled:
:bell_ringing:
:bell_snooze:
:bell:
:bluetooth:
:book_closed:
:bookmark_book:
:bookmark:
:book:
:book_text:
:box_download:
:box_open:
:box:
:branch:
:briefcase:
:browser_alt:
:browser:
:button_add:
:button_minus:
:calculator:
:calendar_add:
:calendar_date:
:calendar_days:
:calendar_day:
:calendar_last_day:
:calendar_month:
:calendar_move:
:calendar_remove:
:calendar_split:
:calendar:
:calendar_week:
:camera_alt:
:camera_noflash_alt:
:camera_noflash:
:camera:
:capture:
:card_timeline:
:card_view:
:carousel:
:cart:
:cast:
:chain:
:chat_add:
:checkbox_checked:
:checkbox_empty:
:check_circle_outside:
:check_circle:
:check:
:chevron_close:
:chevron_down_circle:
:chevron_down_double:
:chevron_down:
:chevron_left_circle:
:chevron_left_double:
:chevron_left:
:chevron_open:
:chevron_right_circle:
:chevron_right_double:
:chevron_right:
:chevron_up_circle:
:chevron_up_double:
:chevron_up:
:circle_menu:
:circle_split:
:circle:
:clipboard_add:
:clipboard_check:
:clipboard_copy:
:clipboard_cross:
:clipboard_notes:
:clipboard_remove:
:clipboard:
:clock:
:close:
:cloud_disconnect:
:cloud_download_alt:
:cloud_download:
:cloud:
:cloud_upload_alt:
:cloud_upload:
:code:
:coffee:
:coins:
:coin:
:compass:
:component_add:
:contacts:
:contract:
:create:
:credit_card:
:crop:
:cross_circle:
:crosshair:
:cross:
:cube:
:cylinder:
:database:
:diamond:
:directions:
:disc:
:display_alt:
:display:
:document_justified:
:document_list:
:document_stack:
:document:
:document_words:
:door_alt:
:door:
:download_alt:
:download:
:downward:
:drag_circle:
:drag:
:drag_vertical:
:duplicate_alt:
:duplicate:
:edit:
:enter_alt:
:enter:
:episodes:
:exit_left:
:exit_right:
:expand_height:
:expand:
:expand_width:
:external:
:eye_closed:
:eye_no:
:eye:
:face_delighted:
:face_happy:
:face_neutral:
:face_sad:
:file_download:
:files_history:
:files_multi:
:files_stack:
:file_upload:
:film:
:filter_circle:
:filtering:
:filter_single:
:filter:
:fingerprint:
:flag:
:flame_alt:
:flame:
:flip_view:
:floppy:
:folder_add:
:folder_closed:
:folder_minus:
:folder_open:
:fork_git:
:forward:
:frame:
:fullscreen:
:funnel:
:gauge:
:geo:
:gift:
:globe:
:gps:
:grab:
:graph_bar:
:graph_box:
:graph_increase:
:grid_circles_add:
:grid_circles:
:grid_small:
:grid_squares_add:
:grid_squares:
:grid:
:hand:
:harddrive:
:hash:
:heart_rate:
:heart_remove:
:heart:
:height:
:hierarchy:
:home_alt:
:home_check:
:home_door:
:home:
:import:
:inbox_alt:
:inbox:
:info_circle:
:iphone_landscape:
:iphone_portrait:
:jump_backward:
:jump_forward:
:jump_left:
:jump_right:
:keyboard:
:laptop:
:lightbulb_on:
:lightbulb:
:lightning_alt:
:lightning:
:lineweight:
:link_alt:
:link_broken:
:link_horizontal:
:link:
:link_vertical:
:list_add:
:list_numbered:
:list:
:loader:
:location:
:lock_open:
:lock:
:login:
:logout:
:mail_add:
:mail_delete:
:mail_minus:
:mail_new:
:mail_open:
:mail_remove:
:mail_send:
:mail:
:map:
:marquee:
:maximise:
:menu_hamburger:
:menu_horizontal:
:menu_vertical:
:message:
:message_writing:
:microphone_disabled:
:microphone_muted:
:microphone:
:midpoint:
:minimise:
:mini_player:
:minus_circle:
:minus:
:mobile:
:moon:
:move:
:newspaper:
:no_sign:
:notebook:
:notification:
:nut:
:pages:
:panel_bottom:
:panel_center:
:panel_left:
:panel_right:
:panel_sectioned:
:panel_top:
:paperclip:
:paper_folded:
:paper_plane_alt:
:paper_plane:
:paper:
:paragraph_center:
:paragraph_end:
:paragraph_left:
:paragraph_right:
:paragraph_start:
:pdf:
:pen:
:phone_landscape:
:phone_portrait:
:picture:
:pie_half:
:pie_quarter:
:pie_third:
:play_button:
:play:
:plus_circle:
:plus:
:postcard:
:printer:
:projector:
:pull_down:
:pull_left:
:pull_right:
:pull_up:
:push_down:
:push_left:
:push_right:
:push_up:
:question_circle:
:radio_on:
:receipt:
:record:
:redo:
:refresh_alt:
:refresh:
:replicate_alt:
:replicate:
:reset_alt:
:reset_forward:
:reset_hard:
:reset:
:reset_temporary:
:retweet:
:reuse:
:reverse_alt:
:reverse:
:revert:
:rocket:
:ruler:
:scale_contract:
:scale_extend:
:scale:
:scalpel:
:search:
:server:
:settings:
:share_alt:
:share:
:shuffle:
:side_menu:
:slash_backward:
:slash_forward:
:sliders:
:sms:
:sort_alt:
:sort:
:speaker:
:speech_bubble:
:speech_typing:
:split:
:split_three:
:star:
:sun:
:support:
:swap:
:switch:
:table_header:
:table:
:tag_milestone:
:tags:
:tag:
:target:
:tel:
:text:
:thread:
:thumbs_down:
:thumbs_up:
:ticket:
:timeline:
:todo:
:toggles:
:toggle:
:translate:
:trash_alt:
:trash:
:trophy:
:tv_mode:
:unarchive:
:undo_history:
:undo:
:unlink_horizontal:
:unlink_vertical:
:upload_alt:
:upload:
:upward:
:user_add:
:user_circle:
:user_male_circle:
:user_male:
:user_remove:
:users:
:user:
:venn:
:versions:
:version:
:video:
:volume_0:
:volume_add:
:volume_disabled:
:volume_high:
:volume_low:
:volume_minus:
:volume_muted:
:wallet:
:warning_circle:
:warning_hex:
:warning_triangle:
:waves:
:width:
:wifi_error:
:wifi_none:
:wifi:
:window_collapse_left:
:window_collapse_right:
:window_content:
:window:
:wrap_back:
:wrap_forward:
:write:
:zoom_cancel:
:zoom_in:
:zoom_out:
:zoom_reset:
Attribution:
This is the set of free svg-icons available from System UIcons by Corey Ginnivan.