Template:MdiIcon: Difference between revisions

From BITPlan Wiki
Jump to navigation Jump to search
No edit summary
No edit summary
 
(10 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 17: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