vue-material/dist/docs/20.861ee4ae.js

webpackJsonp([20,32],{237:function(e,s,m){s=e.exports=m(1)(),s.push([e.id,"strong[data-v-42fff1b4]{margin:auto 16px auto 0;display:inline-block}",""])},350:function(e,s,m){var t,o;m(558);var a=m(478);o=t=t||{},"object"!=typeof t.default&&"function"!=typeof t.default||(o=t=t.default),"function"==typeof o&&(o=o.options),o.render=a.render,o.staticRenderFns=a.staticRenderFns,o._scopeId="data-v-42fff1b4",e.exports=t},478:function(e,s){e.exports={render:function(){var e=this,s=e.$createElement,m=e._self._c||s;return m("page-content",{attrs:{"page-title":"Components - Icon"}},[m("docs-component",[m("div",{slot:"description"},[m("p",[e._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.")]),e._v(" "),m("p",[e._v("You can see the full list of icons on the "),m("a",{attrs:{href:"https://material.io/icons/",target:"_blank",rel:"noopener"}},[e._v("Material Icons")]),e._v(" website. Replace the spaces in the icon name by underscores (for example, "),m("code",[e._v("arrow back")]),e._v(" becomes "),m("code",[e._v("arrow_back")]),e._v(").")]),e._v(" "),m("p",[e._v("Alternatively you can use your PNG or SVG icons using the "),m("code",[e._v("md-src")]),e._v(" property.")]),e._v(" "),m("p",[e._v("The following classes can be applied to change the color palette:")]),e._v(" "),m("ul",{staticClass:"md-body-2"},[m("li",[m("code",[e._v("md-primary")])]),e._v(" "),m("li",[m("code",[e._v("md-accent")])]),e._v(" "),m("li",[m("code",[e._v("md-warn")])])])]),e._v(" "),m("div",{slot:"api"},[m("api-table",{attrs:{name:"md-icon"}},[m("md-table",{slot:"classes"},[m("md-table-header",[m("md-table-row",[m("md-table-head",[e._v("Name")]),e._v(" "),m("md-table-head",[e._v("Description")])],1)],1),e._v(" "),m("md-table-body",[m("md-table-row",[m("md-table-cell",[e._v("md-size-{type}")]),e._v(" "),m("md-table-cell",[e._v("Change the size of an icon. From 2x to 5x. Example: md-size-3x")])],1)],1)],1),e._v(" "),m("md-table",{slot:"properties"},[m("md-table-header",[m("md-table-row",[m("md-table-head",[e._v("Name")]),e._v(" "),m("md-table-head",[e._v("Type")]),e._v(" "),m("md-table-head",[e._v("Description")])],1)],1),e._v(" "),m("md-table-body",[m("md-table-row",[m("md-table-cell",[e._v("md-src")]),e._v(" "),m("md-table-cell",[m("code",[e._v("String")])]),e._v(" "),m("md-table-cell",[e._v("The src of the image file. Can be SVG icons too!")])],1)],1)],1)],1)],1),e._v(" "),m("div",{slot:"example"},[m("example-box",{attrs:{"card-title":"Google Font"}},[m("div",{slot:"demo"},[m("md-icon",[e._v("home")]),e._v(" "),m("md-icon",{staticClass:"md-primary"},[e._v("menu")]),e._v(" "),m("md-icon",{staticClass:"md-accent"},[e._v("people")]),e._v(" "),m("md-icon",{staticClass:"md-warn"},[e._v("access_time")])],1),e._v(" "),m("div",{slot:"code"},[m("code-block",{attrs:{lang:"xml"}},[e._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)]),e._v(" "),m("example-box",{attrs:{"card-title":"Sizes"}},[m("div",{slot:"demo"},[m("md-icon",[e._v("home")]),e._v(" "),m("md-icon",{staticClass:"md-size-2x md-primary"},[e._v("home")]),e._v(" "),m("md-icon",{staticClass:"md-size-3x md-accent"},[e._v("home")]),e._v(" "),m("md-icon",{staticClass:"md-size-4x md-warn"},[e._v("home")])],1),e._v(" "),m("div",{slot:"code"},[m("code-block",{attrs:{lang:"xml"}},[e._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)]),e._v(" "),m("example-box",{attrs:{"card-title":"Images"}},[m("div",{slot:"demo"},[m("md-layout",{attrs:{"md-gutter":!0}},[m("md-layout",[m("strong",{staticClass:"md-body-2"},[e._v("SVG:")]),e._v(" "),m("md-icon",{attrs:{"md-src":"assets/icon-home.svg"}}),e._v(" "),m("md-icon",{staticClass:"md-size-2x md-primary",attrs:{"md-src":"assets/icon-home.svg"}}),e._v(" "),m("md-icon",{staticClass:"md-size-3x md-accent",attrs:{"md-src":"assets/icon-home.svg"}}),e._v(" "),m("md-icon",{staticClass:"md-size-4x md-warn",attrs:{"md-src":"assets/icon-home.svg"}})],1),e._v(" "),m("md-layout",[m("strong",{staticClass:"md-body-2"},[e._v("PNG:")]),e._v(" "),m("md-icon",{attrs:{"md-src":"assets/icon-menu.png"}},[e._v("menu")]),e._v(" "),m("md-icon",{staticClass:"md-size-2x",attrs:{"md-src":"assets/icon-menu.png"}},[e._v("menu")]),e._v(" "),m("md-icon",{staticClass:"md-size-3x",attrs:{"md-src":"assets/icon-menu.png"}},[e._v("menu")]),e._v(" "),m("md-icon",{staticClass:"md-size-4x",attrs:{"md-src":"assets/icon-menu.png"}},[e._v("menu")])],1)],1)],1),e._v(" "),m("div",{slot:"code"},[m("code-block",{attrs:{lang:"xml"}},[e._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)]),e._v(" "),m("example-box",{attrs:{"card-title":"Themes"}},[m("div",{slot:"demo"},[m("md-icon",{staticClass:"md-primary",attrs:{"md-theme":"light-blue"}},[e._v("home")]),e._v(" "),m("md-icon",{staticClass:"md-primary",attrs:{"md-theme":"green"}},[e._v("menu")]),e._v(" "),m("md-icon",{staticClass:"md-primary",attrs:{"md-theme":"brown"}},[e._v("people")]),e._v(" "),m("md-icon",{staticClass:"md-primary",attrs:{"md-theme":"orange"}},[e._v("access_time")])],1),e._v(" "),m("div",{slot:"code"},[m("code-block",{attrs:{lang:"xml"}},[e._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:[]}},558:function(e,s,m){var t=m(237);"string"==typeof t&&(t=[[e.id,t,""]]);m(2)(t,{});t.locals&&(e.exports=t.locals)}});