vue-material/dist/docs/icon.7fe4c2a3.js

webpackJsonp([18,37],{811:function(s,e,o){function m(s){o(913)}var t=o(1)(null,o(953),m,"data-v-8266ba2a",null);s.exports=t.exports},881:function(s,e,o){e=s.exports=o(795)(),e.push([s.i,"strong[data-v-8266ba2a]{margin:auto 16px auto 0;display:inline-block}",""])},913:function(s,e,o){var m=o(881);"string"==typeof m&&(m=[[s.i,m,""]]),m.locals&&(s.exports=m.locals);o(796)("1fa376aa",m,!0)},953:function(s,e){s.exports={render:function(){var s=this,e=s.$createElement,o=s._self._c||e;return o("page-content",{attrs:{"page-title":"Components - Icon"}},[o("docs-component",[o("div",{slot:"description"},[o("p",[s._v("A system icon, or UI icon, symbolizes a command, file, device, or directory. System icons are also used to represent common actions like trash, print, and save.")]),s._v(" "),o("p",[s._v("You can see the full list of icons on the "),o("a",{attrs:{href:"https://material.io/icons/",target:"_blank",rel:"noopener"}},[s._v("Material Icons")]),s._v(" website. Replace the spaces in the icon name by underscores (for example, "),o("code",[s._v("arrow back")]),s._v(" becomes "),o("code",[s._v("arrow_back")]),s._v(").")]),s._v(" "),o("p",[s._v("Alternatively you can use your PNG or SVG icons using the "),o("code",[s._v("md-src")]),s._v(" property.")]),s._v(" "),o("p",[s._v("The use of font icons without ligatures are suported too, although this approach lacks accessibility support.")]),s._v(" "),o("p",[s._v("The following classes can be applied to change the color palette:")]),s._v(" "),o("ul",{staticClass:"md-body-2"},[o("li",[o("code",[s._v("md-primary")])]),s._v(" "),o("li",[o("code",[s._v("md-accent")])]),s._v(" "),o("li",[o("code",[s._v("md-warn")])])])]),s._v(" "),o("div",{slot:"api"},[o("api-table",{attrs:{name:"md-icon"}},[o("md-table",{slot:"classes"},[o("md-table-header",[o("md-table-row",[o("md-table-head",[s._v("Name")]),s._v(" "),o("md-table-head",[s._v("Description")])],1)],1),s._v(" "),o("md-table-body",[o("md-table-row",[o("md-table-cell",[s._v("md-size-{type}")]),s._v(" "),o("md-table-cell",[s._v("Change the size of an icon. From 2x to 5x. Example: md-size-3x")])],1)],1)],1),s._v(" "),o("md-table",{slot:"properties"},[o("md-table-header",[o("md-table-row",[o("md-table-head",[s._v("Name")]),s._v(" "),o("md-table-head",[s._v("Type")]),s._v(" "),o("md-table-head",[s._v("Description")])],1)],1),s._v(" "),o("md-table-body",[o("md-table-row",[o("md-table-cell",[s._v("md-src")]),s._v(" "),o("md-table-cell",[o("code",[s._v("String")])]),s._v(" "),o("md-table-cell",[s._v("The src of the image file. Can be SVG icons too!")])],1),s._v(" "),o("md-table-row",[o("md-table-cell",[s._v("md-iconset")]),s._v(" "),o("md-table-cell",[o("code",[s._v("String")])]),s._v(" "),o("md-table-cell",[s._v("The font icon set. Example: "),o("code",[s._v('md-iconset="fa fa-pencil"')]),s._v(" for font awesome.")])],1)],1)],1)],1)],1),s._v(" "),o("div",{slot:"example"},[o("example-box",{attrs:{"card-title":"Google Font"}},[o("div",{slot:"demo"},[o("md-icon",[s._v("home")]),s._v(" "),o("md-icon",{staticClass:"md-primary"},[s._v("menu")]),s._v(" "),o("md-icon",{staticClass:"md-accent"},[s._v("people")]),s._v(" "),o("md-icon",{staticClass:"md-warn"},[s._v("access_time")])],1),s._v(" "),o("div",{slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[s._v('\n            <md-icon>home</md-icon>\n            <md-icon class="md-primary">menu</md-icon>\n            <md-icon class="md-accent">people</md-icon>\n            <md-icon class="md-warn">access_time</md-icon>\n          ')])],1)]),s._v(" "),o("example-box",{attrs:{"card-title":"Sizes"}},[o("div",{slot:"demo"},[o("md-icon",[s._v("home")]),s._v(" "),o("md-icon",{staticClass:"md-size-2x md-primary"},[s._v("home")]),s._v(" "),o("md-icon",{staticClass:"md-size-3x md-accent"},[s._v("home")]),s._v(" "),o("md-icon",{staticClass:"md-size-4x md-warn"},[s._v("home")])],1),s._v(" "),o("div",{slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[s._v('\n            <md-icon>home</md-icon>\n            <md-icon class="md-size-2x md-primary">home</md-icon>\n            <md-icon class="md-size-3x md-accent">home</md-icon>\n            <md-icon class="md-size-4x md-warn">home</md-icon>\n          ')])],1)]),s._v(" "),o("example-box",{attrs:{"card-title":"Images"}},[o("div",{slot:"demo"},[o("md-layout",{attrs:{"md-gutter":!0}},[o("md-layout",[o("strong",{staticClass:"md-body-2"},[s._v("SVG:")]),s._v(" "),o("md-icon",{attrs:{"md-src":"assets/icon-home.svg"}}),s._v(" "),o("md-icon",{staticClass:"md-size-2x md-primary",attrs:{"md-src":"assets/icon-home.svg"}}),s._v(" "),o("md-icon",{staticClass:"md-size-3x md-accent",attrs:{"md-src":"assets/icon-home.svg"}}),s._v(" "),o("md-icon",{staticClass:"md-size-4x md-warn",attrs:{"md-src":"assets/icon-home.svg"}})],1),s._v(" "),o("md-layout",[o("strong",{staticClass:"md-body-2"},[s._v("PNG:")]),s._v(" "),o("md-icon",{attrs:{"md-src":"assets/icon-menu.png"}},[s._v("menu")]),s._v(" "),o("md-icon",{staticClass:"md-size-2x",attrs:{"md-src":"assets/icon-menu.png"}},[s._v("menu")]),s._v(" "),o("md-icon",{staticClass:"md-size-3x",attrs:{"md-src":"assets/icon-menu.png"}},[s._v("menu")]),s._v(" "),o("md-icon",{staticClass:"md-size-4x",attrs:{"md-src":"assets/icon-menu.png"}},[s._v("menu")])],1)],1)],1),s._v(" "),o("div",{slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[s._v('\n            <md-layout :md-gutter="true">\n              <md-layout>\n                <strong class="md-body-2">SVG:</strong>\n                <md-icon md-src="assets/icon-home.svg"></md-icon>\n                <md-icon class="md-size-2x md-primary" md-src="assets/icon-home.svg"></md-icon>\n                <md-icon class="md-size-3x md-accent" md-src="assets/icon-home.svg"></md-icon>\n                <md-icon class="md-size-4x md-warn" md-src="assets/icon-home.svg"></md-icon>\n              </md-layout>\n\n              <md-layout>\n                <strong class="md-body-2">PNG:</strong>\n                <md-icon md-src="assets/icon-menu.png">menu</md-icon>\n                <md-icon class="md-size-2x" md-src="assets/icon-menu.png">menu</md-icon>\n                <md-icon class="md-size-3x" md-src="assets/icon-menu.png">menu</md-icon>\n                <md-icon class="md-size-4x" md-src="assets/icon-menu.png">menu</md-icon>\n              </md-layout>\n            </md-layout>\n          ')])],1)]),s._v(" "),o("example-box",{attrs:{"card-title":"Font Icons"}},[o("div",{slot:"demo"},[o("link",{attrs:{rel:"stylesheet",href:"https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"}}),s._v(" "),o("div",[s._v("This first example uses "),o("a",{attrs:{href:"http://fontawesome.io/icons/",target:"fa_icons"}},[s._v("Font Awesome Icons")])]),s._v(" "),o("md-icon",{attrs:{"md-iconset":"fa fa-home"}}),s._v(" "),o("md-icon",{staticClass:"md-size-2x md-primary",attrs:{"md-iconset":"fa fa-bars"}}),s._v(" "),o("md-icon",{staticClass:"md-size-3x md-accent",attrs:{"md-iconset":"fa fa-users"}}),s._v(" "),o("md-icon",{staticClass:"md-size-4x md-warn",attrs:{"md-iconset":"fa fa-clock-o"}}),s._v(" "),o("hr"),s._v(" "),o("link",{attrs:{rel:"stylesheet",href:"https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"}}),s._v(" "),o("div",[s._v("This second example uses "),o("a",{attrs:{href:"http://ionicons.com/",target:"ion_icons"}},[s._v("Ion Icons")])]),s._v(" "),o("md-icon",{attrs:{"md-iconset":"ion-home"}}),s._v(" "),o("md-icon",{staticClass:"md-size-2x md-primary",attrs:{"md-iconset":"ion-navicon-round"}}),s._v(" "),o("md-icon",{staticClass:"md-size-3x md-accent",attrs:{"md-iconset":"ion-person-stalker"}}),s._v(" "),o("md-icon",{staticClass:"md-size-4x md-warn",attrs:{"md-iconset":"ion-clock"}})],1),s._v(" "),o("div",{slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[s._v('\n            <md-icon md-iconset="fa fa-home"></md-icon>\n            <md-icon md-iconset="fa fa-bars" class="md-size-2x md-primary"></md-icon>\n            <md-icon md-iconset="fa fa-users" class="md-size-3x md-accent"></md-icon>\n            <md-icon md-iconset="fa fa-clock-o" class="md-size-4x md-warn"></md-icon>  \n            <hr/>\n            <md-icon md-iconset="ion-home"></md-icon>\n            <md-icon md-iconset="ion-navicon-round" class="md-size-2x md-primary"></md-icon>\n            <md-icon md-iconset="ion-person-stalker" class="md-size-3x md-accent"></md-icon>\n            <md-icon md-iconset="ion-clock" class="md-size-4x md-warn"></md-icon>  \n          ')])],1)]),s._v(" "),o("example-box",{attrs:{"card-title":"Themes"}},[o("div",{slot:"demo"},[o("md-icon",{staticClass:"md-primary",attrs:{"md-theme":"light-blue"}},[s._v("home")]),s._v(" "),o("md-icon",{staticClass:"md-primary",attrs:{"md-theme":"green"}},[s._v("menu")]),s._v(" "),o("md-icon",{staticClass:"md-primary",attrs:{"md-theme":"brown"}},[s._v("people")]),s._v(" "),o("md-icon",{staticClass:"md-primary",attrs:{"md-theme":"orange"}},[s._v("access_time")])],1),s._v(" "),o("div",{slot:"code"},[o("code-block",{attrs:{lang:"xml"}},[s._v('\n            <md-icon md-theme="light-blue" class="md-primary">home</md-icon>\n            <md-icon md-theme="green" class="md-primary">menu</md-icon>\n            <md-icon md-theme="brown" class="md-primary">people</md-icon>\n            <md-icon md-theme="orange" class="md-primary">access_time</md-icon>\n          ')])],1)])],1)])],1)},staticRenderFns:[]}}});