Package `@iconify/icons-material-symbols-light` not published to npm

[chris-m92]

Package `@iconify/icons-material-symbols-light` not published to npm

[cyberalien]

Those packages are no longer maintained.

That specific package would be a CommonJS package, which should not be used in modern development process.

Offline icon component was created when solutions like Unplugin Icons did not exist. It is no longer needed in modern development process. Unplugin Icons does pretty much the same as you need, but without overhead because it does everything at build time. Offline icon component is far inferior solution compared to it.

For legacy users old packages will always be available, but no longer updated and new packages for new icon sets are no longer created.

Solutions?

If you do want to use that component with newer icons, it will require a bit of work. You'll need to create new files for icons, extract data from Iconify API and wrap that data in addCollection() function that you can import from component.

For example, for Material Symbols Light, if you need icons chevron-right and chevron-left, get them from API like this:

https://api.iconify.design/material-symbols-light.json?icons=chevron-right,chevron-left

End point is icon set prefix + .json, set icons parameter to comma separated list of icons you need.

Copy icon data, wrap it in addCollection():

import { addCollection } from '@iconify/react';

addCollection({"prefix":"material-symbols-light","lastModified":1702636034,"aliases":{},"width":24,"height":24,"icons":{"lock":{"body":"<path fill=\"currentColor\" d=\"M6.615 21q-.666 0-1.14-.475Q5 20.051 5 19.385v-8.77q0-.666.475-1.14Q5.949 9 6.615 9H8V7q0-1.671 1.164-2.836T12 3q1.671 0 2.836 1.164T16 7v2h1.385q.666 0 1.14.475q.475.474.475 1.14v8.77q0 .666-.475 1.14q-.474.475-1.14.475zM12 16.5q.633 0 1.066-.434q.434-.433.434-1.066t-.434-1.066Q12.633 13.5 12 13.5t-1.066.434Q10.5 14.367 10.5 15t.434 1.066q.433.434 1.066.434M9 9h6V7q0-1.25-.875-2.125T12 4q-1.25 0-2.125.875T9 7z\"/>"},"lock-open":{"body":"<path fill=\"currentColor\" d=\"M6.615 9H15V7q0-1.25-.875-2.125T12 4q-1.25 0-2.125.875T9 7H8q0-1.671 1.164-2.836T12 3q1.671 0 2.836 1.164T16 7v2h1.385q.666 0 1.14.475q.475.474.475 1.14v8.77q0 .666-.475 1.14q-.474.475-1.14.475H6.615q-.666 0-1.14-.475Q5 20.051 5 19.385v-8.77q0-.666.475-1.14Q5.949 9 6.615 9M12 16.5q.633 0 1.066-.434q.434-.433.434-1.066t-.434-1.066Q12.633 13.5 12 13.5t-1.066.434Q10.5 14.367 10.5 15t.434 1.066q.433.434 1.066.434\"/>"}}})

then import that file in your code before components are rendered, so in something like app.ts or whatever main entry point is.