Item with Icon Media for React

It sizes an icon that has no size class of its own to size-4, so icons line up from row to row without classes on each. When the row has a description, ItemMedia also moves to the top so the icon lines up with the title.

Simple ones that say what kind of row it is: a shield for security, a bell for a notification, a file for a document. The icon is decorative here, marked aria-hidden="true", because the title says what it means.

An avatar when the row is about a person. An icon, as with this shield, when the row is a system event, a setting, or a file type. For a picture, set ItemMedia variant to image.

One clear next step, Review here, as a small outline button. A second, quieter action such as Dismiss can sit beside it in ItemActions, which spaces its children with a small gap.

ShieldAlertIcon has aria-hidden and no color class, so it inherits the tile. variant="icon" sizes an icon that has no size class. The title Security Alert and the description carry the meaning.

Yes: the icon is hidden from assistive technology, and the row is read as the title, the description and the Review button. If the icon is the only place a meaning appears, drop aria-hidden and give it a label, or put that meaning in text.