This walkthrough gets you a styled icon on the page in about a minute — either a Google Material Symbol typed in by name, or your own uploaded picture used as the icon. The Icon paragraph handles both, and it never shows the two at once.
Typing the symbol in by name
The Content tab asks for an Icon Name, which is the ligature string from Google's catalogue; the shipped default is star. Six more fields shape it, and each one maps to a real variable-font axis:
- Material Symbols Style — sharp, outlined or rounded. Outlined is the default.
- Fill — a simple On/Off switch between the hollow and solid forms.
- Weight — stroke thickness from 100 to 700, defaulting to 400.
- Grade — finer than weight, accepting anything from -25 to 200.
- Optical Size — 20px to 48px, so the stroke stays true as the glyph scales.
- Icon Font Size and Icon Color — measured in rem (default 5) and stored as a colour value that starts at
#212121.
Uploading a picture instead
The Image Icon field accepts png, gif, jpg, jpeg and webp. Its help text spells out the trade: upload something here and the Material Symbol is hidden, because the paragraph shows one or the other and never both. Alt and title attributes are available on the upload, so an informative image icon still describes itself.
Round it off with the optional Title, Body and Link fields — the link, when set, wraps both the heading text and the icon.
You do not have to install the fonts
The three Material Symbols .woff2 files ship inside the module, with matching @font-face declarations, so icons render on install with nothing to configure. Sites that only ever upload picture icons never touch those files at all.
Next: grab the enable command from the Paragraphs Bundles module page and set an icon against a dark background to see how Grade earns its keep.
If your project needs a custom bundle or module rather than a stock one, Drupal development services covers it, and recent projects show the range.
