How to write click function for edit icon in cypress

you can use get() like querySelector:

let selector = 'svg.MuiIconButton-root'
cy.get(selector).click()

Finding the card with name 'cypress' and clicking the edit button

cy.contains('.MuiCardContent-root', 'cypress').within(() => {
  cy.get('svg.MuiSvgIcon-root').eq(0)  // 1st button is edit
    .click()
})

You can right click on the element in your dev tools and copy the selector then do:

cy.get('selector').click()

You can use:

cy.get('svg.MuiSvgIcon-root').click()

If the above doesn't work, you can add {force: true} and try:

cy.get('svg.MuiSvgIcon-root').click({force: true})

If you want to click any particular icon, you have to use the eq() command:

cy.get('svg.MuiSvgIcon-root').eq(0).click() //clicks the first svg icon

You can try using this:

cy.get('a[role="button"]').eq(0).click()

Add the attribute (this a best practice from Cypress docs) to your html element

<span [attr.data-cy]="nav-menu-mat-icon"></span>

and then select it from your steps file:

get('nav-menu-mat-icon').click();

Unless you have an example repo to share, it may be tough to understand the problem in whole. Depending on your app behavior, I'd recommend appending .should('be.visible') to your .get() as to continuously requery for your element.