Difference between revisions of "Template:MdiIcon"

From BITPlan Wiki
Jump to navigation Jump to search
(Created page with "<includeonly><i class="material-icons">{{{icon|face}}}</i></includeonly>")
 
 
(17 intermediate revisions by the same user not shown)
Line 1: Line 1:
<includeonly><i class="material-icons">{{{icon|face}}}</i></includeonly>
+
<noinclude><!-- THIS FILE IS PROTECTED - smartGENERATOR WILL NOT OVERWRITE IT -->{{TemplateSequence
 +
|prev=Template:Link
 +
|next=Template:PageBreak
 +
}}
 +
This is a template to display Material Design Icons
 +
 
 +
see
 +
* https://google.github.io/material-design-icons/#icon-font-for-the-web
 +
* https://material.io/resources/icons/?style=baseline
 +
* https://stackoverflow.com/a/37626669/1497139
 +
* https://cdn.materialdesignicons.com/1.1.34/
 +
* http://wiki.bitplan.com/index.php/Template:Mdi-icon
 +
= Usage =
 +
make sure the Material Icons font is available e.g. with
 +
<source lang='html'>
 +
<html><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></html>
 +
</source>
 +
<pre>{{mdiIcon|icon=home|color=blue|size=64}}</pre>
 +
{{mdiIcon|icon=home|color=blue|size=64}}
 +
<pre>{{mdiIcon|icon=favorite|color=red|size=48}}</pre>
 +
{{mdiIcon|icon=favorite|color=red|size=48}}
 +
<pre>{{mdiIcon|icon=face|size=36}}</pre>
 +
{{mdiIcon|icon=face|size=36}}
 +
<pre>{{mdiIcon|icon=arrow_up_down_bold|size=32}}</pre>
 +
{{mdiIcon|icon=arrow_up_down_bold|size=32}}
 +
<pre>{{mdiIcon|title=go home}}</pre>
 +
{{mdiIcon|title=go home}}
 +
<html><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></html>
 +
[[Category:Template]][[Category:Icon]]
 +
</noinclude><includeonly><i class="material-icons" title='{{{title|{{{icon|home}}}}}}' style='color:{{{color|green}}};font-size:{{{size|24}}}px'>{{{icon|home}}}</i></includeonly>

Latest revision as of 18:27, 14 January 2020

This is a template to display Material Design Icons

see

Usage

make sure the Material Icons font is available e.g. with

<html><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></html>
{{mdiIcon|icon=home|color=blue|size=64}}

home

{{mdiIcon|icon=favorite|color=red|size=48}}

favorite

{{mdiIcon|icon=face|size=36}}

face

{{mdiIcon|icon=arrow_up_down_bold|size=32}}

arrow_up_down_bold

{{mdiIcon|title=go home}}

home