I am using Angular with Material
<button mat-icon-button><mat-icon svgIcon="thumb-up"></mat-icon>Start Recording</button>
I am trying to add an icon to button, but I can't figure out how to do it, and can't find documentation for this.
https://material.angular.io/components/button/api
looking the docs, there is this:
that button has the following html:
<a _ngcontent-c1="" aria-label="Angular Material" class="docs-button mat-button" mat-button="" routerlink="/" tabindex="0" aria-disabled="false" href="/"><span class="mat-button-wrapper">
<img _ngcontent-c1="" alt="angular" class="docs-angular-logo" src="../../../assets/img/homepage/angular-white-transparent.svg">
<span _ngcontent-c1="">Material</span>
</span> <div class="mat-button-ripple mat-ripple" matripple=""></div><div class="mat-button-focus-overlay">
</div>
</a>
is that the right way to do it?
Just add the <mat-icon> inside mat-button or mat-raised-button. See the example below. Note that I am using material icon instead of your svg for demo purpose:
<button mat-button>
<mat-icon>mic</mat-icon>
Start Recording
</button>
OR
<button mat-raised-button color="accent">
<mat-icon>mic</mat-icon>
Start Recording
</button>
Here is a link to stackblitz demo.
All you need to do is add the mat-icon-button directive to the button element in your template. Within the button element specify your desired icon with a mat-icon component.
You'll need to import MatButtonModule and MatIconModule in your app module file.
From the Angular Material buttons example page, hit the view code button and you'll see several examples which use the material icons font, eg.
<button mat-icon-button>
<mat-icon aria-label="Example icon-button with a heart icon">favorite</mat-icon>
</button>
In your case, use
<mat-icon>thumb_up</mat-icon>
As per the getting started guide at https://material.angular.io/guide/getting-started, you'll need to load the material icon font in your index.html.
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Or import it in your global styles.scss.
#import url("https://fonts.googleapis.com/icon?family=Material+Icons");
As it mentions, any icon font can be used with the mat-icon component.
My preference is to utilize the inline attribute. This will cause the icon to correctly scale with the size of the button.
<button mat-button>
<mat-icon inline=true>local_movies</mat-icon>
Movies
</button>
<!-- Link button -->
<a mat-flat-button color="accent" routerLink="/create"><mat-icon inline=true>add</mat-icon> Create</a>
I add this to my styles.css to:
solve the vertical alignment problem of the icon inside the button
material icon fonts are always a little too small compared to button text
button.mat-button .mat-icon,
a.mat-button .mat-icon,
a.mat-raised-button .mat-icon,
a.mat-flat-button .mat-icon,
a.mat-stroked-button .mat-icon {
vertical-align: top;
font-size: 1.25em;
}
Add to app.module.ts
import {MatIconModule} from '#angular/material/icon';
& link in your global index.html.
the above CSS can be written in SASS as follows (and it actually includes all button types, instead of just button.mat-button)
button,
a {
&.mat-button,
&.mat-raised-button,
&.mat-flat-button,
&.mat-stroked-button {
.mat-icon {
vertical-align: top;
font-size: 1.25em;
}
}
}
The Material icons use the Material icon font, and the font needs to be included with the page.
Here's the CDN from Google Web Fonts:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I am making a facebook like login page. in it im using 2 inline text boxes just like facebook front page. things were going good but automatically the size of both the textbox increases at runtime. i don't know what had happened as i already told you that things were going good
<div class=" form-group form-inline">
<asp:TextBox ID="tbName" runat="server" ForeColor="Black" class="form-control" placeholder="First name"></asp:TextBox>
<asp:TextBox ID="tbSName" runat="server" ForeColor="Black" class="form-control" placeholder="Surname"></asp:TextBox>
<div class="form-group form-inline">
<asp:RequiredFieldValidator ID="rfvName" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid First Name" ForeColor="Red" Style="font-size: small" ControlToValidate="tbName"></asp:RequiredFieldValidator>
<asp:RequiredFieldValidator ID="rfvSname" runat="server" Display="Dynamic" ErrorMessage="* Enter Valid Surname" ForeColor="Red" Style="font-size: small; padding:60px;" ControlToValidate="tbSName"></asp:RequiredFieldValidator>
</div>
</div>
also i m using bootstrap to make it responsive and in small screens it's working well but not on large screens
see the image click here to see the image
Please help
your bootstrap css is applied later. when you run the page in browser initially the css is NOT applied but when the css is loaded the textbox sizes increases which is the correct style of the selected class in bootstrap css. Try using ur inspect element of browser and remove the class attribute, you will get back ur initially loaded textboxes style
Link is not working in dropdown-toggle button in nav bar (Header menu), when i click dropdown list is working but the link is not working. The link is "Product.html" but its not go to the product page.
Product<span class="fa fa-angle-down dropdown-arrow"></span></span>
Try to remove the extra closing </span> tag inside the <a></a> tag.
Product<span class="fa fa-angle-down dropdown-arrow"></span>
I am using the bootstrap accordion (collapse) in my project, but unfortunately the result is not the desire one. I have around 8 items in the accordion, some of them having lot of text inside (sometimes more than half a page).
I am trying to collapse/expand items in accordion, but the behavior is totally strange and unpredictable. I just copied the example on their site and added more items.
My expectations was that each time I click on a closed item it will open and the open div will receive focus. Sometimes I see page scrolling very fast and focus is positioned in a wrong place or item is opened but focus is too low on the page and title is not visible.
Any idea on how to handle accordion properly or what's the correct behavior ?
Here's a working example http://jsfiddle.net/panchroma/RdK8t/
It's taken directly from the bootstrap example with extended content added to one of the elements.
The typical code is:
<div class="accordion" id="accordionParent"> <!-- start #accordionParent wrap -->
<!-- start typical content group -->
<div class="accordion-group">
<div class="accordion-heading">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionParent" href="#collapseOne">
Collapsible Group Item #1
</a>
</div>
<div id="collapseOne" class="accordion-body collapse in">
<div class="accordion-inner">
content
</div>
</div>
</div>
<!-- end typical content group -->
</div> <!-- end accordionParent wrap -->
You could validate your page to ensure there isn't a nesting problem, and double check that if your aren't using the full bootstrap js file, make sure you are including the transitions plugin.
Hope this helps!
I am using the fastklick plugin for iOS what is very popular on the net for speeding the click event on jquery mobile apps with phonegap on iOS.
The buttons and links are working very well except the back button from jquery.
If I use this:
<div data-role="page" id="test" data-add-back-btn="true">
then if I want to click on the button, there is already the delay from iOS. The button is getting blue at first and after that the page is sliding. How can I prevent this so this button is working fast like the other buttons I am creating with
<button>...</button>?
Is it possible to create my own back button and apply an event to it?
First remove data-add-back-btn="true" then you can try this:
<a class="ui-btn-left" data-icon="arrow-l" href="javascript:history.back(1) " data-theme="a">Back</a>
or this:
<a class="ui-btn-left" data-icon="arrow-l" href="#" data-theme="a" id="back-btn">Back</a>
$('#back-btn').bind('touchstart', function(e) {
$.mobile.changePage("#pageID");
});
Just change #pageID to your real page ID. touchstart event is great for back button if you are just doing it and not a page scrolling.