Difference between revisions of "Template:MdiIcon"

From BITPlan Wiki
Jump to navigation Jump to search
Line 1: Line 1:
<noinclude>
+
<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
 
This is a template to display Material Design Icons
  
 
see  
 
see  
 
* https://google.github.io/material-design-icons/#icon-font-for-the-web
 
* 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://stackoverflow.com/a/37626669/1497139
 
* https://cdn.materialdesignicons.com/1.1.34/
 
* https://cdn.materialdesignicons.com/1.1.34/
 
* http://wiki.bitplan.com/index.php/Template:Mdi-icon
 
* http://wiki.bitplan.com/index.php/Template:Mdi-icon
 
 
= Usage =
 
= Usage =
 
make sure the Material Icons font is available e.g. with
 
make sure the Material Icons font is available e.g. with
Line 13: Line 16:
 
<html><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></html>
 
<html><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></html>
 
</source>
 
</source>
<pre>{{mdi-icon|icon=home|color=blue|size=48}}</pre>
+
<pre>{{mdiIcon|icon=home|color=blue|size=64}}</pre>
{{mdi-icon|icon=home|color=blue|size=96}}
+
{{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}}
 
<html><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></html>
 
<html><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></html>
 
[[Category:Template]][[Category:Icon]]
 
[[Category:Template]][[Category:Icon]]
 
</noinclude><includeonly><i  class="material-icons" style='color:{{{color|green}}};font-size:{{{size|24}}}px'>{{{icon|home}}}</i></includeonly>
 
</noinclude><includeonly><i  class="material-icons" style='color:{{{color|green}}};font-size:{{{size|24}}}px'>{{{icon|home}}}</i></includeonly>

Revision as of 06:36, 7 December 2019

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