If you ask me, I'd recommend steering clear of images in these situations and opting for one of the fonts already at your disposal. You can easily use them as pseudo elements on the mat-error element.
I've provided examples for both Material Icons and FontAwesome Icons. Unfortunately, I couldn't get the Material Icons font to work in this snippet editor, but the CSS remains the same and will work if you have the appropriate font applied in your project. It's always good to have choices.
However, if you're set on using an image, simply add the CSS displayed in the mat-error section for flex alignment.
mat-error {
display: flex;
align-items: center;
}
mat-error:before {
/* If Font Awesome Icon font */
font-family: "Font Awesome 5 Free";
font-weight: 600;
content: "\f071";
/* If Material Icon font */
/*
font-family: "Material Icons";
content: "warning"
-webkit-font-feature-settings: "liga";
-webkit-font-smoothing: antialiased;
*/
color: #f00;
margin-right: .5rem;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
<mat-error>Hey I'm an error with an icon.</mat-error>
<br><br>
<mat-error>Ooooh, another error without need for an additional image file.</mat-error>