OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

I have some questions regarding mat-icon-button, mat-icon and mat-menu

  • Thread starter Thread starter CabbageMan
  • Start date Start date
C

CabbageMan

Guest
I wanted to do the following things with this icon:

  1. Change the color of the icon while the menu is displayed
  2. Make the menu a different color
  3. Center the menu regarding the icon
  4. Have the menu a little more separated from the icon

This is the html file:

Code:
<div class="icon-container">
    <button mat-icon-button [matMenuTriggerFor]="menu">
        <mat-icon class="login-icon">account_circle</mat-icon>
    </button>
    <mat-menu #menu="matMenu" xPosition="before" class="menu">
        <button mat-menu-item class="menu-item">Login</button>
        <button mat-menu-item>Sign Up</button>
    </mat-menu>
</div>

This is the css file:

Code:
.login-icon{
    color: #94a1b2;
    display: flex;
    align-items: center;
    transform: scale(2.6);
}

.icon-container{
    display: flex;
    justify-self: flex-end;
    margin-right: 4rem;
}

The following css code:

Code:
.menu-item{
    background-color: #94a1b2;
}

.menu{
    background-color: #94a1b2;
}

Has this result

Meanwhile this code:

Code:
.login-icon:active{
    color: #2cb67d;
}

Only changes the color of the icon if you click in a specific part of the icon. Also, I wanted to know if there was a way for the icon to retain the color while the menu is open.
<p>I wanted to do the following things with this <a href="https://i.sstatic.net/Jp5X68m2.png" rel="nofollow noreferrer">icon:</a></p>
<ol>
<li>Change the color of the icon while the menu is displayed</li>
<li>Make the menu a different color</li>
<li>Center the menu regarding the icon</li>
<li>Have the menu a little more separated from the icon</li>
</ol>
<p>This is the html file:</p>
<pre><code><div class="icon-container">
<button mat-icon-button [matMenuTriggerFor]="menu">
<mat-icon class="login-icon">account_circle</mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before" class="menu">
<button mat-menu-item class="menu-item">Login</button>
<button mat-menu-item>Sign Up</button>
</mat-menu>
</div>
</code></pre>
<p>This is the css file:</p>
<pre><code>.login-icon{
color: #94a1b2;
display: flex;
align-items: center;
transform: scale(2.6);
}

.icon-container{
display: flex;
justify-self: flex-end;
margin-right: 4rem;
}
</code></pre>
<p>The following css code:</p>
<pre><code>.menu-item{
background-color: #94a1b2;
}

.menu{
background-color: #94a1b2;
}
</code></pre>
<p>Has this <a href="https://i.sstatic.net/CUbpeS5r.png" rel="nofollow noreferrer">result</a></p>
<p>Meanwhile this code:</p>
<pre><code>.login-icon:active{
color: #2cb67d;
}
</code></pre>
<p>Only changes the color of the icon if you click in a specific part of the icon. Also, I wanted to know if there was a way for the icon to retain the color while the menu is open.</p>
Continue reading...
 
Top