Template:MdiIcon: Difference between revisions

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