marella / material-symbols Goto Github PK

Two examples I've noticed are pill and stethoscope. Is this an issue on Google's side or a bug in this repo?

I was trying to update to a new version, but found an icon missing.

https://github.com/marella/material-symbols/blob/v0.8.1/svg/400/outlined/insights.svg
https://github.com/marella/material-symbols/blob/v0.9.0/svg/400/outlined/insights.svg

Is there a warning before removing any existing icons?
any reason that some icons are deleted?
is there a list of removed icons?

I read some things about self hosting fonts for performance en thought, why not try it with an icon font aswell.
Using the symbols this way doesn't seem like a good idea when looking at the size.

This raises the question for me, when should this package be used?

Congrats on the new project! I would love if you could add SVG icon support to your to-do list for this project, similar to material-icons.

Cheers!

Hello,

I am able to import the svgs as React components into my Next.js App via SVGR. They render in the browser.

I am having problem changing the size of the icons by font size.

I have added this to my global css to change the icons by font size:

svg {
    width: 1rem;
    height: 1rem;
    fill: currentColor;
  }

I then call the components with Tailwindcss class like this:
<Face className="text-8xl" />

In the browser the Face icon gets cropped and is not the correct size.

Any ideas why?

The following symbol is not part of this package:

https://fonts.google.com/icons?icon.query=progress_activity&icon.set=Material+Symbols&icon.style=Outlined

hey, can we get in touch together? maybe it's worth a chat for you :)

just send me a private message on twitter, @azurystudio

Just wondering if you have any suggestions on how to preload these fonts when packaged by vue/vite/rollup.

I've posted a general question about it here, but thought you might have some ideas.

it's there for other weights, not sure why :) it was there in previous versions

Hello,

Would it be possible to add an index file that would export all svgs using a named export? That would allow us to import them like

import { Face } from '@material-design-icons/svg/filled';

This would also autocomplete imports which is quite nice to have.

There is issue with react(tsx) and webpack 5 when using @material-symbols/svg-400/outlined/face.svg. I don't know wheather I did wrong or not.

ERROR: "TS2307: Cannot find module '@material-symbols/svg-400/outlined/face.svg' or its corresponding type declarations."

Please include _data/versions.json in the package so we have access to all the icon names.

Do you mind adding another file to the @material-symbols/font-... packages that has a static FILL option? This should reduce the file size by around 30%.

(follow-up to #14)

See here
https://codepen.io/marcomtr/pen/JjZjrNK

What I have done :

Install material-symbols :

pnpm install material-symbols

import into [PATH TO MY PROJECT]/src/style/abstracts/icons.scss :

@import "material-symbols";

import icons.scss file in [PATH TO MY PROJECT]/src/style/main.scss

@import "./abstract/icons.scss

I work with vue so i added main.scss file in vue.config.js like that :

module.exports = {
  css: {
    loaderOptions: {
      sass: {
        additionalData: `@import "[PATH TO MY PROJECT]/src/style/main.scss";`
      }
    }
  }
}

This should theoretically work but I get the following error in the console:

ERROR in ./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss (./node_modules/.pnpm/[email protected][email protected]/node_modules/css-loader/dist/cjs.js??clonedRuleSet-22.use[1]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-loader/dist/stylePostLoader.js!./node_modules/.pnpm/[email protected]_qxxfhhrl3yknjjmta266mo3u64/node_modules/postcss-loader/dist/cjs.js??clonedRuleSet-22.use[2]!./node_modules/.pnpm/[email protected][email protected]/node_modules/sass-loader/dist/cjs.js??clonedRuleSet-22.use[3]!./node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/App.vue?vue&type=style&index=0&id=7ba5bd90&lang=scss) 5:36-97

Module not found: Error: Can't resolve './material-symbols-outlined.woff2' in '[PATH TO MY PROJECT]\src'

And this for the 3 different types of symbols (outlined, rounded and sharp)

Hey @marella - I see that the GitHub Actions are pulling updates of the symbols, but the npm package is stuck on a version from April (0.5.5).

Are there any plans to update the icons with a viewbox that corresponds to the icon's size?

Hello,

There's some issue with font download URLs. For example, we try to download
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@48,300,0,0
and it seems that stroke thickness is thinner than before. But if you'll try to download SVG with the same parameters it looks right.

After installing material-symbols using npm the following message is shown in the console

My steps

1. Run in the console npm i material-symbols@latest
2. Add import 'material-symbols'; at the top of the __layout.svelte file
3. Add <span class="material-symbols-outlined">face</span> to the component file
4. Open console
5. Error message is shown

Error message

Failed to resolve entry for package "material-symbols". The package may have incorrect main/module/exports specified in its package.json: Failed to resolve entry for package "material-symbols". The package may have incorrect main/module/exports specified in its package.json.

P.S. I asked this question on StackOverflow too

Update

As was able to run this package by changing the approach. I replaced step 2 with CSS imports.

Instead of

// __layout.svelte

import 'material-symbols';

...

I created 'app.css' file in the src folder. Added @import 'material-symbols'; at the top of its file. Imported app.css into __layout.svelte.

/* app.css */
@import 'material-symbols';

// __layout.svelte 

- import 'material-symbols';
+ import '../app.css';

...

It works

Hello,

Is someone able to assist, please? It appears this package is no longer there:
https://registry.npmjs.org/@material-symbols/svg-400/-/svg-400-0.5.4.tgz

It is returning a 404. Any assistance would be greatly appreciated.

Thank you!
Sam

Thanks for providing this package! :)

Would it be possible to copy the HTML tag when you click on a symbol?
It's now a bit difficult to copy the symbol name.

Hi, is it possible to make it usable in Flutter app development as pubspec.yaml dependency?

is it possible to use icons with fill=1 as shown in demo https://marella.me/material-symbols/demo/#outlined ?

Hi,

Is it possible to replicate the functionality of material-icons and use CSS classes to display icons instead of ligatures?

Thanks,
Nick

The default optical size on [https://fonts.google.com/icons] is 24, but only 48 is available in @material-symbols/svg-x. I haven't found a way to change the optical size using styles yet. Is there another option for 24 optical size svgs? I saw the comment that additional sizes weren't included due to package limits, but it doesn't mention any potential workarounds.

Hello,

I recently encountered an issue when trying to use the opsz font variation with the "Material Symbols" library. My expectation was that setting the opsz value would directly influence the font size of the icon, but this did not seem to be the case. Instead, I had to manually adjust the fontSize in CSS to achieve the desired size.

Steps to Reproduce:

Use the Material Symbols library in a Next.js project.
Create a React component to display an icon with the opsz value set to 48.

interface Props {
  name: string
  className?: string
  type?: 'outlined' | 'rounded' | 'sharp'
  fill?: boolean
  weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700
  grade?: -25 | 0 | 200
  opticalSize?: 20 | 24 | 40 | 48
}

export const MaterialSymbol = ({
  name,
  className,
  type = 'rounded',
  fill = false,
  weight = 400,
  grade = 0,
  opticalSize = 24,
}: Props) => {
  return (
    <span
      style={{
        fontVariationSettings: `'FILL' ${fill ? 1 : 0},
        'wght' ${weight},
        'GRAD' ${grade},
        'opsz' ${opticalSize}`,
      }}
      className={`inline-block flex-shrink-0 overflow-hidden material-symbols-${type} ${className}`}
    >
      {name}
    </span>
  )
}

<MaterialSymbol name="logout" opticalSize={48} />

Observe that the icon does not scale to the expected size.

Workaround:

Setting the fontSize directly in CSS works as expected.

Suggested Resolution:

It would be helpful if the documentation clarified the relationship (or lack thereof) between opsz and the actual rendered font size. Additionally, providing guidance on how users can correctly scale icons would be beneficial.

Thank you for your attention to this matter, and I appreciate the hard work that has gone into the library!

I'm moving a Next.js project to a Turborepo project, and have extracted my icon components to a shared UI library so that other components and pages can use them.

I have these dependencies in the ui package

  "dependencies": {
    "@material-symbols/svg-300": "^0.8.1",
    "@material-symbols/svg-400": "^0.8.1",

And I'm trying to use them here

"use client";
import Menu from "@material-symbols/svg-300/outlined/menu.svg";
import Call from "@material-symbols/svg-400/outlined/call.svg";
import Wifi from "@material-symbols/svg-400/outlined/wifi.svg";

But typescript is throwing
Cannot find module '@material-symbols/svg-300/outlined/menu.svg' or its corresponding type declarations.

I get TypeScript completion on the import until /outlined/ but not for any of the SVG files.

I've tried using this method from Webpack but still get the import error. Here's the structure I've tried:

• apps
• • web
• packages
• • ui
• • • Icon
• • • • Icon.tsx (using the components)
• • • • icons.ts (importing and exporting the SVGs as components)
• • • • index.d.ts (declare module '*.svg' {...)
• • • • index.ts