Skip to content
Permalink
Browse files

feat(docs): Add instructions for Material Icons Outlined/Round/Sharp #…

  • Loading branch information...
rstoenescu committed Jul 12, 2019
1 parent 6adbfb3 commit 834c4b272df9a14983bbec7cc856fc6e71e7388f
Showing with 34 additions and 0 deletions.
  1. +9 −0 docs/src/pages/options/installing-icon-libraries.md
  2. +7 −0 docs/src/pages/vue-components/icon.md
  3. +18 −0 extras/README.md
@@ -29,6 +29,9 @@ Adding more than one set (showing all options):
```js
extras: [
'material-icons',
'material-icons-outlined',
'material-icons-round',
'material-icons-sharp',
'mdi-v3',
'ionicons-v4',
'eva-icons',
@@ -58,6 +61,12 @@ The example link tag below would include Fontawesome v5.6.3 icons. Do a Google s
rel="stylesheet"
>

<!-- CDN example for Material Icons Outlined (similar thing for Round and Sharp versions) -->
<link
href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined"
rel="stylesheet"
>

<!-- CDN example for Fontawesome 5.6.3 -->
<link
rel="stylesheet"
@@ -23,9 +23,16 @@ Make sure that you [installed the icon library](/options/installing-icon-librari

### Icons name cheatsheet

```html
<q-icon name="..." />
```

| Name | Prefix | Examples | Notes |
| --- | --- | --- | --- |
| material-icons | *None* | thumb_up | Notice the underline character instead of dash or space |
| material-icons-outlined | o_ | o_thumb_up | Notice the underline character instead of dash or space; **Requires Quasar 1.0.5+** |
| material-icons-round | r_ | r_thumb_up | Notice the underline character instead of dash or space; **Requires Quasar 1.0.5+** |
| material-icons-sharp | s_ | s_thumb_up | Notice the underline character instead of dash or space; **Requires Quasar 1.0.5+** |
| ionicons-v4 | ion-, ion-md-, ion-ios-, ion-logo- | ion-heart, ion-logo-npm, ion-md-airplane | Use QIcon instead of `<ion-icon>` component; Logo icons require 'ion-logo-' prefix |
| fontawesome-v5 | fa[s,r,l,b] fa- | "fas fa-ambulance" | QIcon "name" property is same as "class" attribute value in Fontawesome docs examples (where they show `<i>` tags) |
| mdi-v3 | mdi- | mdi-alert-circle-outline | Notice the use of dash characters |
@@ -29,6 +29,24 @@
Why this package? Because it strips down unnecessary package files (so faster download times), all in one place, tested and ready to use with Quasar. One other reason is that the material icons npm package sometimes fails to be downloaded by NPM.
### QIcon cheatsheet
```html
<q-icon name="..." />
```
| Name | Prefix | Examples | Notes |
| --- | --- | --- | --- |
| material-icons | *None* | thumb_up | Notice the underline character instead of dash or space |
| material-icons-outlined | o_ | o_thumb_up | Notice the underline character instead of dash or space |
| material-icons-round | r_ | r_thumb_up | Notice the underline character instead of dash or space |
| material-icons-sharp | s_ | s_thumb_up | Notice the underline character instead of dash or space |
| ionicons-v4 | ion-, ion-md-, ion-ios-, ion-logo- | ion-heart, ion-logo-npm, ion-md-airplane | Use QIcon instead of `<ion-icon>` component; Logo icons require 'ion-logo-' prefix |
| fontawesome-v5 | fa[s,r,l,b] fa- | "fas fa-ambulance" | QIcon "name" property is same as "class" attribute value in Fontawesome docs examples (where they show `<i>` tags) |
| mdi-v3 | mdi- | mdi-alert-circle-outline | Notice the use of dash characters |
| eva-icons | eva- | eva-shield-outline, eva-activity-outline | Notice the use of dash characters |
| themify | ti- | ti-hand-point-up | Notice the use of dash characters |

## Supporting Quasar
Quasar Framework is an MIT-licensed open source project. Its ongoing development is made possible thanks to the support by these awesome [backers](https://github.com/quasarframework/quasar/blob/dev/backers.md).

0 comments on commit 834c4b2

Please sign in to comment.
You can’t perform that action at this time.