Difference between revisions of "Template:MdiIcon"

From BITPlan Wiki
Jump to navigation Jump to search
 
(9 intermediate revisions by the same user not shown)
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://cdn.materialdesignicons.com/1.1.34/
 +
* 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 9: 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=48}}
+
{{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>
 
<html><link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"></html>
 
[[Category:Template]][[Category:Icon]]
 
[[Category:Template]][[Category:Icon]]
</noinclude><includeonly><span style='color:{{{color|green}}};font-size:{{{size|24}}}px'><i class="material-icons">{{{icon|home}}}</i></span></includeonly>
+
</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 19: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