Search code examples
vue.jsquasar-frameworkquasar

Quasar font icons in css


Can I use my iconSet in css with background-image property?

My quasar.config properties:

       extras: ["material-icons-outlined"],
       framework: {
         iconSet: "material-icons-outlined",
       }. 

Solution

  • The answer is to add a font in your main css:

    @font-face {
      font-family: "Material Icons";
      font-style: normal;
      font-weight: 400;
      src: url(https://fonts.gstatic.com/s/materialicons/v55/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2')
     }
    

    Then in your code you can access this your icon with specific code, e.g. content: "\e145"; The list of Material icon codes could be find here