You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
feat(ui): Google Material Symbols support (#13437)
* fix(docs): incorrect icon set path
* feat(extras): new web font and icons => Google Material Symbols (v7)
* chore(extras): bump version => v1.14.0
* feat(ui): support for Material Symbols icon sets
* chore(dev): Material Symbols support
* feat(docs): add Materials Symbols support
* fix(docs): typo in extras path for material-symbols-rounded
* fix(docs): typo in symOutlinedAllInbox
* fix(docs): another reference for Material Symbols
* fix(docs): missing reference to Fontawesome v6
Copy file name to clipboardExpand all lines: docs/src/pages/options/installing-icon-libraries.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ related:
10
10
**This page refers to using [webfont icons](/vue-components/icon#webfont-icons) only.** Svg icons do not need any installation step.
11
11
:::
12
12
13
-
You'll most likely want icons in your website/app and Quasar offers an easy way out of the box for the following icon libraries: [Material Icons](https://material.io/icons/), [Font Awesome](https://fontawesome.com/icons), [Ionicons](http://ionicons.com/), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/). But you can [add support for others](/vue-components/icon#custom-mapping) by yourself.
13
+
You'll most likely want icons in your website/app and Quasar offers an easy way out of the box for the following icon libraries: [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons), [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols), [Font Awesome](https://fontawesome.com/icons), [Ionicons](http://ionicons.com/), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/). But you can [add support for others](/vue-components/icon#custom-mapping) by yourself.
14
14
15
15
::: tip
16
16
In regards to webfont icons, you can choose to install one or more of these icon libraries.
Copy file name to clipboardExpand all lines: docs/src/pages/options/quasar-icon-sets.md
+1-1Lines changed: 1 addition & 1 deletion
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -10,7 +10,7 @@ Quasar components have their own icons. Rather than forcing you into using one i
10
10
11
11
You can install multiple icon libraries, but you must choose only one to use on Quasar's components.
12
12
13
-
Quasar currently supports: [Material Icons](https://material.io/icons/), [Font Awesome](https://fontawesome.com/icons), [Ionicons](http://ionicons.com/), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/).
13
+
Quasar currently supports: [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons), [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols), [Font Awesome](https://fontawesome.com/icons), [Ionicons](http://ionicons.com/), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/).
14
14
15
15
It is also possible to use your own icons (as custom svgs or as images in any format) with any Quasar component, see the [QIcon](/vue-components/icon#image-icons) page for more info on this.
Copy file name to clipboardExpand all lines: docs/src/pages/vue-components/icon.md
+26-2Lines changed: 26 additions & 2 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -8,7 +8,7 @@ related:
8
8
---
9
9
10
10
The QIcon component allows you to easily insert icons within other components or any other area of your pages.
11
-
Quasar supports out of the box: [Material Icons](https://material.io/icons/) , [Font Awesome](https://fontawesome.com/icons), [Ionicons](http://ionicons.com/), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/).
11
+
Quasar supports out of the box: [Material Icons](https://fonts.google.com/icons?icon.set=Material+Icons) , [Material Symbols](https://fonts.google.com/icons?icon.set=Material+Symbols) , [Font Awesome](https://fontawesome.com/icons), [Ionicons](http://ionicons.com/), [MDI](https://materialdesignicons.com/), [Eva Icons](https://akveo.github.io/eva-icons), [Themify Icons](https://themify.me/themify-icons), [Line Awesome](https://icons8.com/line-awesome) and [Bootstrap Icons](https://icons.getbootstrap.com/).
12
12
13
13
Furthermore you can [add support by yourself](/vue-components/icon#custom-mapping) for any icon lib.
14
14
@@ -55,6 +55,9 @@ If you are using webfont-based icons, make sure that you [installed the icon lib
55
55
| material-icons-outlined | o_| o_thumb_up | Notice the underline character instead of dash or space |
56
56
| material-icons-round | r_| r_thumb_up | Notice the underline character instead of dash or space |
57
57
| material-icons-sharp | s_| s_thumb_up | Notice the underline character instead of dash or space |
58
+
| material-symbols-outlined | sym_o_| sym_o_thumb_up | Notice the underline character instead of dash or space |
59
+
| material-symbols-round | sym_r_| sym_r_thumb_up | Notice the underline character instead of dash or space |
60
+
| material-symbols-sharp | sym_s_| sym_s_thumb_up | Notice the underline character instead of dash or space |
58
61
| 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 |
59
62
| ionicons-v5/v6 | ion- | ion-heart, ion-logo-npm, ion-airplane | Use QIcon instead of `<ion-icon>` component; Logo icons require 'ion-logo-' prefix |
60
63
| fontawesome-v6 | fa-[solid,regular,brands] fa- | "fa-solid fa-ambulance" | QIcon "name" property is same as "class" attribute value in Fontawesome docs examples (where they show `<i>` tags) |
@@ -71,7 +74,7 @@ If you are using webfont-based icons, make sure that you [installed the icon lib
71
74
#### Material Icons (Google)
72
75
73
76
* Icon names are always in snake_case.
74
-
* Go to [Material Icons](https://material.io/icons/), look for your desired icon. Remember its name (eg. "all_inbox") and use it.
77
+
* Go to [Material Icons and Symbols](https://material.io/icons/), look for your desired icon. Remember its name (eg. "all_inbox") and use it.
75
78
76
79
#### MDI (Material Design Icons)
77
80
@@ -158,6 +161,9 @@ If you are only using svg icons (and have configured a [Quasar Icon Set](/option
@@ -198,6 +204,24 @@ Svg icons are supplied by `@quasar/extras` (although you can supply [your own sv
198
204
* Go to [Material Icons](https://material.io/icons/), look for your desired icon and remember its name (eg. "all_inbox"), prefix it with "round" and camel-case the result (eg. "roundAllInbox").
* Icon names are in camel-case and always begin with "symOutlined" prefix.
210
+
* Go to [Material Icons](https://material.io/icons/), look for your desired icon and remember its name (eg. "all_inbox"), prefix it with "symOutlined" and camel-case the result (eg. "symOutlinedAllInbox").
* Icon names are in camel-case and always begin with "symSharp" prefix.
216
+
* Go to [Material Icons](https://material.io/icons/), look for your desired icon and remember its name (eg. "all_inbox"), prefix it with "symSharp" and camel-case the result (eg. "symSharpAllInbox").
* Icon names are in camel-case and always begin with "symRounded" prefix.
222
+
* Go to [Material Icons](https://material.io/icons/), look for your desired icon and remember its name (eg. "all_inbox"), prefix it with "symRounded" and camel-case the result (eg. "symRoundedAllInbox").
0 commit comments